<template>
  <div class="registerDetail" ref="contentData">
    <van-row class="rowbox">
      <van-col span="12">
        <div class="taskDetail_box">
          <div class="detailbox_item mt0">
            <div class="detailbox_item_title">任务概览</div>
            <div class="detail_content">
              <div class="task_item_type">
                <div class="task_item_tt">任务类型:</div>
                <div class="task_item_val">{{ dataSource.taskTypeName ? dataSource.taskTypeName : '-' }}</div>
              </div>
              <div class="task_item_type">
                <div class="task_item_tt">任务描述:</div>
                <div class="task_item_desc">{{ dataSource.taskDes ? dataSource.taskDes : '-' }}</div>
              </div>
              <div class="task_itembox">
                <div class="task_itembox_con">
                  <div class="task_label">任务开始时间：</div>
                  <div class="task_value">
                    {{ dataSource.taskCreateTime ? dataSource.taskCreateTime.substring(0, 10) : '- -' }}
                  </div>
                </div>
                <div class="task_itembox_con">
                  <div class="task_label">应跟进时间：</div>
                  <div class="task_value">
                    {{ dataSource.shuldFollowTime ? dataSource.shuldFollowTime.substring(0, 10) : '- -' }}
                  </div>
                </div>
                <div class="task_itembox_con">
                  <div class="task_label">任务跟进人员：</div>
                  <div class="task_value">{{ dataSource.taskPerson ? dataSource.taskPerson : '- -' }}</div>
                </div>
                <div class="task_itembox_con">
                  <div class="task_label">最近跟进时间：</div>
                  <div class="task_value">{{ dataSource.lastFollowInTime ? dataSource.lastFollowInTime : '- -' }}</div>
                </div>
                <div class="task_itembox_con" v-if="dataSource.taskTypeName == '续保到期提醒'">
                  <div class="task_label">保险公司：</div>
                  <div class="task_value">{{ dataSource.insCmpName ? dataSource.insCmpName : '- -' }}</div>
                </div>

                <div class="task_itembox_con" v-if="dataSource.taskTypeName == '续保到期提醒'">
                  <div class="task_label">保险到期日：</div>
                  <div class="task_value">{{ dataSource.insureDate ? dataSource.insureDate : '- -' }}</div>
                </div>
                <div class="task_itembox_con" v-if="dataSource.taskTypeName == '续保到期提醒'">
                  <div class="task_label">保险类型：</div>
                  <div class="task_value">{{ dataSource.insurance ? dataSource.insurance : '- -' }}</div>
                </div>

                <div class="task_itembox_con" v-if="dataSource.taskTypeName == '续保到期提醒'">
                  <div class="task_label">保险分类：</div>
                  <div class="task_value">{{ dataSource.insureType ? dataSource.insureType : '- -' }}</div>
                </div>

                <div class="task_itembox_con">
                  <div class="task_label">是否会员绑车：</div>
                  <div class="task_value">{{ dataSource.isHYCar ? '是' : '- -' }}</div>
                </div>
                <div class="task_itembox_con">
                  <div class="task_label">{{ dataSource.taskTypeName == '续保到期提醒' ? '是否续保' : '是否回场' }}：</div>
                  <div class="task_value">{{ dataSource.taskResult ? dataSource.taskResult : '- -' }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="con_box h250">
          <div class="detailbox_item">
<!--            <div class="detailbox_item_title">车辆信息概览</div>-->
            <div style="display: flex;justify-content: space-between">
              <div class="detailbox_item_title">车辆信息概览</div>
              <div style="color: #3979FF;font-size: 16px" @click="showUpdateMaintain(carInfo)"> <van-icon name="edit" color="#3979FF"/> 保养记录登记</div>
            </div>
            <div class="carInfo_content">
              <div class="carInfo_item">
                <div class="item_label">维修中心：</div>
                <div class="item_val">{{ carInfo.fixCenterName ? carInfo.fixCenterName : '- -' }}</div>
              </div>
              <div class="carInfo_item">
                <div class="item_label">服务顾问：</div>
                <div class="item_val">{{ carInfo.serverPsnName ? carInfo.serverPsnName : '- -' }}</div>
              </div>
              <div class="carInfo_item">
                <div class="item_label">车牌号：</div>
                <div class="item_val">{{ carInfo.carNo ? carInfo.carNo : '- -' }}</div>
              </div>
              <div class="carInfo_item">
                <div class="item_label">车架号：</div>
                <div class="item_val">{{ carInfo.vinCode ? carInfo.vinCode : '- -' }}</div>
              </div>
              <div class="carInfo_item">
                <div class="item_label">车型：</div>
                <div class="item_val">{{ carInfo.carModelNameName ? carInfo.carModelNameName : '- -' }}</div>
              </div>
              <div class="carInfo_item">
                <div class="item_label">上次进场时间：</div>
                <div class="item_val">{{ carInfo.lastIn ? carInfo.lastIn : ' - -' }}</div>
              </div>
              <div class="carInfo_item">
                <div class="item_label">当前里程数：</div>
                <div class="item_val">{{ carInfo.carMile ? carInfo.carMile + '(km)' : '- - ' }}</div>
              </div>
              <div class="carInfo_item">
                <div class="item_label">会员等级：</div>
                <div class="item_val">{{ carInfo.currentGradeName ? carInfo.currentGradeName : '- - ' }}</div>
              </div>

              <div class="carInfo_item">
                <div class="item_label">客户VIP等级：</div>
                <div class="item_val">{{  carInfoKhyy.storeCusLevel ?  carInfoKhyy.storeCusLevel : '- - ' }}</div>
              </div>
              <div class="carInfo_item">
                <div class="item_label">等级设定理由：</div>
                <div class="item_val" :style="carInfoKhyy.setReason ?{ width: '65%', wordBreak: 'break-word' }: ''">
                  {{ carInfoKhyy.setReason ? carInfoKhyy.setReason : '- - ' }}</div>
              </div>

              <div class="carInfo_item">
                <div class="item_label">所属客户管家：</div>
                <div class="item_val">{{ carInfoKhyy.khgj ? carInfoKhyy.khgj : '- - ' }}</div>
              </div>
              <div class="carInfo_item">
                <div class="item_label">车辆状态：</div>
                <div class="item_val">{{ carInfoKhyy.clzt ? carInfoKhyy.clzt : '- - ' }}</div>
              </div>
              <div class="carInfo_item">
                <div class="item_label">保险状态：</div>
                <div class="item_val">{{ carInfoKhyy.bxzt ? carInfoKhyy.bxzt : '- - ' }}</div>
              </div>
              <div class="carInfo_item">
                <div class="item_label">上次接待SA：</div>
                <div class="item_val">{{ carInfoKhyy.lastStoreSa ? carInfoKhyy.lastStoreSa : '- - ' }}</div>
              </div>
              <div class="carInfo_item">
                <div class="item_label">上次保险出单人：</div>
                <div class="item_val">{{ carInfoKhyy.insDjr ? carInfoKhyy.insDjr : '- - ' }}</div>
              </div>
              <div class="carInfo_item">
                <div class="item_label">上次保险出单时间：</div>
                <div class="item_val">{{ carInfoKhyy.insCdrq ? carInfoKhyy.insCdrq : '- - ' }}</div>
              </div>
              <div class="carInfo_item">
                <div class="item_label">上次保险出单类型：</div>
                <div class="item_val">{{ carInfoKhyy.insLx ? carInfoKhyy.insLx : '- - ' }}</div>
              </div>

<!--              <div class="carInfo_item">-->
<!--                <div class="item_label">车辆里程数：</div>-->
<!--                <div class="item_val">{{ carInfo.currCarMile ? carInfo.currCarMile + '(km)' : '- -' }}</div>-->
<!--              </div>-->
            </div>
          </div>
        </div>

        <div class="con_box">
          <div class="detailbox_item">
            <div class="detailbox_item_title">跟进信息</div>
            <div class="followInfo_content followH" v-if="dataSource.followEntry && dataSource.followEntry.length != 0">
              <div class="followInfo_item" v-for="(item, index) in dataSource.followEntry" :key="index" :class="index == 0 ? 'active' : ''">
                <div class="followInfo_top">
                  <div class="followInfo_circle"></div>
                  <div class="followInfo_name">{{ item.followNumber }}</div>
                </div>
                <div class="followInfo_box">
                  <div class="followInfo_linebox">
                    <div class="followInfo_line"></div>
                  </div>
                  <div class="followInfo_val">
                    <div class="followInfo_val_item">
                      <div class="item_label">跟进人员：</div>
                      <div class="item_val">{{ item.followPerson ? item.followPerson : '-' }}</div>
                    </div>
                    <div class="followInfo_val_item">
                      <div class="item_label">跟进方式：</div>
                      <div class="item_val">{{ item.followType ? item.followType : '-' }}</div>
                    </div>
                    <div class="followInfo_val_item">
                      <div class="item_label">跟进结果：</div>
                      <div class="item_val">{{ item.followResult ? item.followResult : '-' }}</div>
                    </div>
                    <div class="followInfo_val_item">
                      <div class="item_label">跟进时间：</div>
                      <div class="item_val">{{ item.followDate ? item.followDate : '-' }}</div>
                    </div>
                    <div class="followInfo_val_item" v-if="item.followResult == '持续跟进'">
                      <div class="item_label">下次跟进时间：</div>
                      <div class="item_val">{{ item.nextFollowDate ? item.nextFollowDate : '-' }}</div>
                    </div>
                    <div class="followInfo_val_item" v-if="item.followResult == '邀约成功'">
                      <div class="item_label">预约进场时间：</div>
                      <div class="item_val">{{ item.bookInDate ? item.bookInDate : '-' }}</div>
                    </div>
                    <div class="followInfo_val_item" v-if="item.followResult == '邀约成功'">
                      <div class="item_label">预约维修中心：</div>
                      <div class="item_val">{{ item.fixCenterName ? item.fixCenterName : '-' }}</div>
                    </div>
                    <div class="followInfo_val_item" v-if="item.followResult == '邀约成功'">
                      <div class="item_label">预约顾问：</div>
                      <div class="item_val">{{ item.empName ? item.empName : '-' }}</div>
                    </div>
                    <div class="followInfo_val_item2" v-if="item.followResult == '持续跟进' || item.followResult == '邀约成功'">
                      <div class="item_label">跟进备注：</div>
                      <div class="item_val">{{ item.folloeNote ? item.folloeNote : '-' }}</div>
                    </div>
                    <div class="followInfo_val_item" v-if="item.followResult == '本次战败'">
                      <div class="item_label">战败原因：</div>
                      <div class="item_val">{{ item.failed ? item.failed : '-' }}</div>
                    </div>
                    <div class="followInfo_val_item2" v-if="item.followResult == '本次战败'">
                      <div class="item_label">战败说明：</div>
                      <div class="item_val">{{ item.followSupple ? item.followSupple : '-' }}</div>
                    </div>
                    <div v-if="item.calls != null && item.calls.length > 0">
                      <div
                        class="followInfo_val_item borderClass"
                        v-for="(call, ind) in item.calls"
                        :key="ind"
                        style="display: flex; flex-direction: row; align-items: center"
                      >
                        <van-icon
                          name="play-circle-o"
                          color="#1684fc"
                          size="21"
                          @click="play(call, 'cf' + item.entryId + call.id)"
                          v-if="playIndex != 'cf' + item.entryId + call.id && call.localRecordFile != '' && call.localRecordFile != null"
                        />
                        <van-icon
                          name="pause-circle-o"
                          color="#1684fc"
                          size="21"
                          @click="stop('cf' + item.entryId + call.id)"
                          v-if="playIndex == 'cf' + item.entryId + call.id && call.localRecordFile != '' && call.localRecordFile != null"
                        />
                        <div style="width: 65%" class="videoClass" v-if="call.localRecordFile != '' && call.localRecordFile != null">
                          <progress-custom
                            :showNumber="false"
                            :value="audioStatus == 'cf' + item.entryId + call.id ? playTime : 0"
                            @SetOpacityConfig="updateAudio($event, 'cf' + item.entryId, call)"
                          />
                        </div>
                        <div
                          style="width: 24%; justify-content: center"
                          class="videoClass"
                          v-if="call.localRecordFile != '' && call.localRecordFile != null"
                        >
                          {{ formateTime(audioStatus == 'cf' + item.entryId + call.id ? playIngTime : 0) }} /
                          {{ formateTime(call.bridgeDuration) }}
                        </div>
                        <div style="font-size: 14px; text-align: center; width: 12%; color: #165dff" @click="goAsr(call)" v-if="call.fileStatus == 1">
                          转写
                        </div>
                        <div v-else style="width: 12%; height: 100%"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="no_icon mt100" v-else>
              <img class="no_icon_img" src="@/assets/images/no_icon.png" />
              <div class="no_icon_txt">暂无内容</div>
            </div>
            <audio id="audio" preload="metadata" :src="tapeFile" />
            <div class="addBtn" v-if="dataSource.oneBillStauts == '未处理'">
              <div class="orderItem_filebox" @click="addFollow">
                <i class="iconfont icon-add"></i>
                添加跟进记录
              </div>
            </div>
          </div>
        </div>

        <div class="con_box">
          <div class="detailbox_item">
            <div class="detailbox_item_title">跟进历史</div>
            <div class="detailbox_item_search">
              <div class="followParams">
                <div class="followParams_item">
                  <div class="followParams_label">任务类型</div>
                  <div class="followParams_select" @click="handleSelectTaskType">
                    <span class="followParams_select_txt">{{ followParams.taskTypeName }}</span>
                    <span class="iconfont icon-more"></span>
                  </div>
                </div>
                <div class="followParams_item" @click="handleDateOrder">
                  <div class="followParams_label">跟进时间</div>
                  <div class="followParams_icon">
                    <span :class="followParams.isDesc ? 'iconfont icon-desc' : 'iconfont icon-asc'"></span>
                  </div>
                </div>
              </div>
            </div>
            <van-pull-refresh class="repair_content repair_height" v-model="followRefreshing" @refresh="followOnRefresh">
              <van-list
                v-model="followLoading"
                :finished="followFinished"
                finished-text="没有更多了"
                @load="getFollowData"
                v-if="followHistoryList && followHistoryList.length != 0"
              >
                <div class="followList">
                  <div class="followInfo_content">
                    <div class="followInfo_item active" v-for="(item, index) in followHistoryList" :key="index" :class="index == 0 ? 'active' : ''">
                      <div class="followInfo_top">
                        <div class="followInfo_circle"></div>
                        <div class="followInfo_name">
                          {{ item.followDate }}
                          <span :class="item.followResult == '本次战败' ? 'red' : item.followResult == '邀约成功' ? 'green' : ''">
                            {{ item.followResult }}
                          </span>
                        </div>
                      </div>
                      <div class="followInfo_box">
                        <div class="followInfo_linebox">
                          <div class="followInfo_line"></div>
                        </div>
                        <div class="followInfo_val">
                          <div class="followInfo_val_item">
                            <div class="item_label">跟进类型：</div>
                            <div class="item_val">{{ item.taskTypeName ? item.taskTypeName : '-' }}</div>
                          </div>
                          <div class="followInfo_val_item">
                            <div class="item_label">跟进人员：</div>
                            <div class="item_val">{{ item.taskPersonName ? item.taskPersonName : '-' }}</div>
                          </div>
                          <div class="followInfo_val_item">
                            <div class="item_label">跟进方式：</div>
                            <div class="item_val">{{ item.followType ? item.followType : '-' }}</div>
                          </div>

                          <div class="followInfo_val_item" v-if="item.followResult == '持续跟进'">
                            <div class="item_label">下次跟进时间：</div>
                            <div class="item_val">{{ item.nextFollowDate ? item.nextFollowDate : '-' }}</div>
                          </div>
                          <div class="followInfo_val_item" v-if="item.followResult == '邀约成功'">
                            <div class="item_label">是否回场：</div>
                            <div class="item_val">{{ item.taskResult ? item.taskResult : '-' }}</div>
                          </div>
                          <div class="followInfo_val_item2" v-if="item.followResult == '持续跟进' || item.followResult == '邀约成功'">
                            <div class="item_label">跟进备注：</div>
                            <div class="item_val">{{ item.followNote ? item.followNote : '-' }}</div>
                          </div>
                          <div class="followInfo_val_item" v-if="item.followResult == '本次战败' || item.followResult == '续保战败'">
                            <div class="item_label">战败原因：</div>
                            <div class="item_val">{{ item.failed ? item.failed : '-' }}</div>
                          </div>
                          <div class="followInfo_val_item2" v-if="item.followResult == '本次战败' || item.followResult == '续保战败'">
                            <div class="item_label">战败说明：</div>
                            <div class="item_val">{{ item.followSupple ? item.followSupple : '-' }}</div>
                          </div>
                          <div v-if="item.calls != null && item.calls.length > 0">
                            <div
                              class="followInfo_val_item borderClass"
                              v-for="(call, ind) in item.calls"
                              :key="ind"
                              style="display: flex; align-items: center; flex-direction: row"
                            >
                              <van-icon
                                name="play-circle-o"
                                color="#1684fc"
                                size="21"
                                @click="play(call, 'of' + item.entryId + call.id)"
                                v-if="playIndex != 'of' + item.entryId + call.id && call.localRecordFile != '' && call.localRecordFile != null"
                              />
                              <van-icon
                                name="pause-circle-o"
                                color="#1684fc"
                                size="21"
                                @click="stop('of' + item.entryId + call.id)"
                                v-if="playIndex == 'of' + item.entryId + call.id && call.localRecordFile != '' && call.localRecordFile != null"
                              />
                              <div style="width: 65%" class="videoClass" v-if="call.localRecordFile != '' && call.localRecordFile != null">
                                <progress-custom
                                  :showNumber="false"
                                  :value="audioStatus == 'of' + item.entryId + call.id ? playTime : 0"
                                  @SetOpacityConfig="updateAudio($event, 'of' + item.entryId, call)"
                                />
                              </div>
                              <div
                                style="width: 24%; justify-content: center"
                                class="videoClass"
                                v-if="call.localRecordFile != '' && call.localRecordFile != null"
                              >
                                {{ formateTime(audioStatus == 'of' + item.entryId + call.id ? playIngTime : 0) }} /
                                {{ formateTime(call.bridgeDuration) }}
                              </div>
                              <div
                                style="font-size: 14px; text-align: center; width: 12%; color: #165dff"
                                @click="goAsr(call)"
                                v-if="call.fileStatus == 1"
                              >
                                转写
                              </div>
                              <div v-else style="width: 12%; height: 100%"></div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </van-list>
              <div class="no_icon" v-else>
                <img class="no_icon_img" src="@/assets/images/no_icon.png" />
                <div class="no_icon_txt">暂无内容</div>
              </div>
            </van-pull-refresh>
          </div>
        </div>

        <div class="con_box">
          <div class="detailbox_item">
            <div class="detailbox_item_title">卡券信息</div>
            <div class="card_content h250">
              <div class="card_list" v-if="cardList && cardList.length != 0">
                <div class="card_item" v-for="(item, index) in cardList" :key="index">
                  <div class="item_lt">¥{{ item.amount }}</div>
                  <div class="item_rt">
                    <div class="item_name">{{ item.couponsName }}</div>
                    <div class="item_number">券号：{{ item.ticketNumber }}</div>
                    <div class="item_time">
                      <div class="txt1">{{ item.usedDate }}领用</div>
                      <div>{{ item.expireDate }}到期</div>
                    </div>
                  </div>
                  <div class="item_type">{{ item.typeName }}</div>
                </div>
              </div>
              <div class="no_icon" v-else>
                <img class="no_icon_img" src="@/assets/images/no_icon.png" />
                <div class="no_icon_txt">暂无内容</div>
              </div>
            </div>
          </div>
        </div>
      </van-col>
      <van-col span="11">
        <div class="con_box mt0">
          <div class="detailbox_item">
            <div class="detailbox_item_title">联系人信息</div>
            <div class="contact_content">
              <div class="contact_item">
                <div class="contact_top">
                  <div class="item_label">客户信息</div>
                  <div class="item_icon">
                    <img class="item_img" src="@/assets/images/wechat_icon.png" @click="getExList(dataSource)" />
                    <img class="item_img" src="@/assets/images/tel_icon.png" @click="handleTel(getAllName('客户',dataSource.customerName), dataSource.mobile)" />
                  </div>
                </div>
                <div class="contact_bottom">
                  <div class="item_name">
                    <div class="txt1">姓名：</div>
                    <div class="txt2">{{ dataSource.customerName ? dataSource.ownerName : '-' }}</div>
                  </div>
                  <div class="item_name">
                    <div class="txt1">手机号码：</div>
                    <div class="txt2">{{ dataSource.mobile ? dataSource.mobile : '-' }}</div>
                  </div>
                </div>
              </div>
              <div class="contact_item">
                <div class="contact_top">
                  <div class="item_label">车主信息</div>
                  <div class="item_icon">
                    <img class="item_img" src="@/assets/images/wechat_icon.png" @click="getExList(dataSource)" />
                    <img class="item_img" src="@/assets/images/tel_icon.png" @click="handleTel(getAllName('车主',dataSource.ownerName), dataSource.ownerPhone)" />
                  </div>
                </div>
                <div class="contact_bottom">
                  <div class="item_name">
                    <div class="txt1">姓名：</div>
                    <div class="txt2">{{ dataSource.ownerName ? dataSource.ownerName : '-' }}</div>
                  </div>
                  <div class="item_name">
                    <div class="txt1">手机号码：</div>
                    <div class="txt2">{{ dataSource.ownerPhone ? dataSource.ownerPhone : '-' }}</div>
                  </div>
                </div>
              </div>
              <div class="contact_item">
                <div class="contact_top">
                  <div class="item_label">送修人</div>
                  <div class="item_icon">
                    <img class="item_img" src="@/assets/images/wechat_icon.png" @click="getExList(dataSource)" />
                    <img class="item_img" src="@/assets/images/tel_icon.png" @click="handleTel(getAllName('送修人',dataSource.contactPeople), dataSource.contactPhone)" />
                  </div>
                </div>
                <div class="contact_bottom">
                  <div class="item_name">
                    <div class="txt1">姓名：</div>
                    <div class="txt2">{{ dataSource.contactPeople ? dataSource.contactPeople : '-' }}</div>
                  </div>
                  <div class="item_name">
                    <div class="txt1">手机号码：</div>
                    <div class="txt2">{{ dataSource.contactPhone ? dataSource.contactPhone : '-' }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="con_box">
          <div class="detailbox_item">
            <div class="detailbox_item_title">客户群信息</div>
            <van-pull-refresh class="groupInfo_content h150" v-model="groupRefreshing" @refresh="groupOnRefresh">
              <van-list
                v-model="groupLoading"
                :finished="groupFinished"
                finished-text="没有更多了"
                @load="getCustomerGroupInfo"
                v-if="groupList && groupList.length != 0"
              >
                <div class="groupInfo">
                  <div class="groupInfo_item" v-for="(item, index) in groupList" :key="index">
                    <div class="groupInfo_icon">群</div>
                    <div class="groupInfo_detail">
                      <div class="groupInfo_name">{{ item.groupName }}</div>
                      <div class="groupInfo_txt">
                        <span class="groupInfo_span">{{ item.groupNums }}人</span>|
                        <span class="groupInfo_span1">群主：{{ item.adminUserName }}</span>
                      </div>
                      <div class="groupInfo_txt1">创建时间：{{ item.createTime }}</div>
                    </div>
                    <!-- <div class="groupInfo_btn" @click.stop="handleShowUser(item)">查看群成员</div> -->
                    <div class="groupInfo_btn">
                      <div  @click.stop="handleShowUser(item)">查看群成员</div>
                      <div class="to_chat">
                        <i class="iconfont  icon-dir-right" style="color: #4898FF;font-size: 22px;"  @click="openChat(item)"></i>
                      </div>
                    </div>
                  </div>
                </div>
              </van-list>
              <div class="no_icon" v-else>
                <img class="no_icon_img" src="@/assets/images/no_icon.png" />
                <div class="no_icon_txt">暂无内容</div>
              </div>
            </van-pull-refresh>
          </div>
        </div>

        <div class="con_box">
          <div class="detailbox_item">
            <div class="detailbox_item_title">车辆维修履历</div>
            <!-- <div class="repair_content h600"> -->
            <!-- <div class="repair_list" v-if="repairList && repairList.length != 0">
                <div class="repair_item" v-for="(item, index) in repairList" :key="index">
                  <div class="item_top">
                    <div class="item_num">
                      <img class="item_icon" src="@/assets/images/repair_icon.png" />
                      <div class="item_name">工单编号：{{ item.repairNumber }}</div>
                    </div>
                    <div class="item_btn" @click="goRepairDetail(item)">详情</div>
                  </div>
                  <div class="item_bottom">
                    <div class="item_box">
                      <div class="item_lt">
                        <div class="item_lable">工单类型：</div>
                        <div class="item_val">{{ item.repairWorkBillType ? item.repairWorkBillType : '- -' }}</div>
                      </div>
                      <div class="item_rt">
                        <div class="item_lable">服务顾问：</div>
                        <div class="item_val">{{ item.serverPersonName ? item.serverPersonName : '- -' }}</div>
                      </div>
                    </div>
                    <div class="item_box">
                      <div class="item_lt">
                        <div class="item_lable">进场时间：</div>
                        <div class="item_val">{{ item.repairBizDate ? item.repairBizDate : '- -' }}</div>
                      </div>
                    </div>
                    <div class="item_box">
                      <div class="item_lt">
                        <div class="item_lable">合计金额：</div>
                        <div class="item_val">{{ item.repairVoucherAmt ? item.repairVoucherAmt + '(元)' : '- -' }}</div>
                      </div>
                    </div>
                    <div class="item_box">
                      <div class="item_lt">
                        <div class="item_lable">卡券抵用：</div>
                        <div class="item_val">{{ item.repairTotalSum ? item.repairTotalSum + '(元)' : '- -' }}</div>
                      </div>
                    </div>
                    <div class="item_box2">
                      <div class="item_lt">
                        <div class="item_lable">人工操作：</div>
                        <div class="item_val">{{ item.repairRstRemark ? item.repairRstRemark : '- -' }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="no_icon mt175" v-else>
                <img class="no_icon_img" src="@/assets/images/no_icon.png" />
                <div class="no_icon_txt">暂无内容</div>
            </div>-->
            <!-- </div> -->
            <van-pull-refresh class="repair_content repair_height" v-model="refreshing" @refresh="onRefresh">
              <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="getRepairworkorder"
                v-if="repairList && repairList.length != 0"
              >
                <div class="repair_list">
                  <div class="repair_item" v-for="(item, index) in repairList" :key="index">
                    <div class="item_top">
                      <div class="item_num">
                        <img class="item_icon" src="@/assets/images/repair_icon.png" />
                        <div class="item_name">工单编号：{{ item.repairNumber }}</div>
                      </div>
                      <div class="item_btn" @click="goRepairDetail(item)">详情</div>
                    </div>
                    <div class="item_bottom">
                      <div class="item_box">
                        <div class="item_lt">
                          <div class="item_lable">工单类型：</div>
                          <div class="item_val">{{ item.repairWorkBillType ? item.repairWorkBillType : '- -' }}</div>
                        </div>
                        <div class="item_rt">
                          <div class="item_lable">服务顾问：</div>
                          <div class="item_val">{{ item.serverPersonName ? item.serverPersonName : '- -' }}</div>
                        </div>
                      </div>
                      <div class="item_box">
                        <div class="item_lt">
                          <div class="item_lable">进场时间：</div>
                          <div class="item_val">{{ item.repairBizDate ? item.repairBizDate : '- -' }}</div>
                        </div>
                        <div class="item_rt">
                          <div class="item_lable">送修人：</div>
                          <div class="item_val">
                            {{ item.repairCus ? item.repairCus : '- -' }}
                            <van-icon name="phone" size="10" color="#59A1FF" />
                            <span v-if="item.repairCusphone" class="item_tel" @click="handleTel(getAllName('送修人',item.repairCus), item.repairCusphone)">{{
                              item.repairCusphone ? item.repairCusphone : ''
                            }}</span>
                          </div>
                        </div>
                      </div>
                      <div class="item_box">
                        <div class="item_lt">
                          <div class="item_lable">进场里程：</div>
                          <div class="item_val">{{ item.carMile ? item.carMile + '(公里)' : '- -' }}</div>
                        </div>
                      </div>
                      <div class="item_box">
                        <div class="item_lt">
                          <div class="item_lable">合计金额：</div>
                          <div class="item_val">{{ item.repairVoucherAmt ? item.repairVoucherAmt + '(元)' : '- -' }}</div>
                        </div>
                      </div>
                      <div class="item_box">
                        <div class="item_lt">
                          <div class="item_lable">卡券抵用：</div>
                          <div class="item_val">{{ item.repairTotalSum ? item.repairTotalSum + '(元)' : '- -' }}</div>
                        </div>
                      </div>
                      <div class="item_box2">
                        <div class="item_lt">
                          <div class="item_lable">人工操作：</div>
                          <div class="item_val">{{ item.repairRstRemark ? item.repairRstRemark : '- -' }}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </van-list>
              <div class="no_icon" v-else>
                <img class="no_icon_img" src="@/assets/images/no_icon.png" />
                <div class="no_icon_txt">暂无内容</div>
              </div>
            </van-pull-refresh>
          </div>
        </div>
        <div class="con_box">
          <div class="detailbox_item">
            <div class="detailbox_item_title">车辆保修保险信息</div>
            <div class="carInfo_content h100">
              <div class="carInfo_item">
                <div class="item_label">保险类型：</div>
                <div class="item_val">{{ carInfo.inusuranceType ? carInfo.inusuranceType : '- -' }}</div>
              </div>

              <div class="carInfo_item">
                <div class="item_label">保险公司：</div>
                <div class="item_val">{{ carInfo.inusuranceComName ? carInfo.inusuranceComName : '- -' }}</div>
              </div>
              <div class="carInfo_item">
                <div class="item_label">保险到期日：</div>
                <div class="item_val">{{ carInfo.inusuranceDate ? carInfo.inusuranceDate : '- -' }}</div>
              </div>
              <div class="carInfo_item">
                <div class="item_label">原厂保修到期日：</div>
                <div class="item_val">{{ dataSource.fixEndDate ? dataSource.fixEndDate : '- -' }}</div>
              </div>
              <div class="carInfo_item">
                <div class="item_label">自营延保到期日：</div>
                <div class="item_val">{{ dataSource.zyEndDate ? dataSource.zyEndDate : '- -' }}</div>
              </div>
            </div>
          </div>
        </div>

        <div class="con_box">
          <div class="detailbox_item">
            <div class="detailbox_item_title">非车险种记录</div>
            <div class="repair_content h395">
              <div class="repair_list" v-if="dataSource.notCarBill && dataSource.notCarBill.length != 0">
                <div class="repair_item" v-for="(item, index) in dataSource.notCarBill" :key="index">
                  <!-- <div class="repair_list" v-if="repairList && repairList.length != 0">
                  <div class="repair_item" v-for="(item, index) in repairList" :key="index">-->
                  <div class="item_bottom">
                    <div class="item_box">
                      <div class="item_lt">
                        <div class="item_lable">投保险种：</div>
                        <div class="item_val">{{ item.insName ? item.insName : '- -' }}</div>
                      </div>
                      <div class="item_rt2">
                        <div class="item_lable">保险公司：</div>
                        <div class="item_val">{{ item.insCmpName ? item.insCmpName : '- -' }}</div>
                      </div>
                    </div>
                    <div class="item_box">
                      <div class="item_lt">
                        <div class="item_lable">起保日期：</div>
                        <div class="item_val">{{ item.beginDate ? item.beginDate : '- -' }}</div>
                      </div>
                      <div class="item_rt2">
                        <div class="item_lable">终保日期：</div>
                        <div class="item_val">{{ item.endDate ? item.endDate : '- -' }}</div>
                      </div>
                    </div>
                    <div class="item_box">
                      <div class="item_lt">
                        <div class="item_lable">被保险人：</div>
                        <div class="item_val">{{ item.insPsn ? item.insPsn : '- -' }}</div>
                      </div>
                      <div class="item_rt2">
                        <div class="item_lable">被保险人电话：</div>
                        <div class="item_val">{{ item.insPhone ? item.insPhone : '- -' }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="no_icon" v-else>
                <img class="no_icon_img" src="@/assets/images/no_icon.png" />
                <div class="no_icon_txt">暂无内容</div>
              </div>
            </div>
          </div>
        </div>
        <div class="con_box">
          <div class="detailbox_item">
            <div class="detailbox_item_title">本车关联任务</div>
            <div class="relat_tab">
              <div
                class="relat_tab_item"
                v-for="(item, index) in relatTabList"
                :key="index"
                :class="relatTabIndex == index ? 'active' : ''"
                @click="handleRelatChange(index)"
              >
                {{ item.name }}
              </div>
            </div>
            <div class="relat_content h395" v-if="relevanceList && relevanceList.length != 0">
              <div class="relat_item" v-for="(item, index) in relevanceList" :key="index" @click.stop="handleDealTask(item)">
                <div class="relat_content_header">
                  <div class="name">{{ item.taskName }}</div>
                  <div class="status" :class="item.oneBillStatus == '已处理' ? '' : 'status2'">{{ item.oneBillStatus }}</div>
                </div>
                <div class="relat_carInfo">{{ item.taskDes ? item.taskDes : '-' }}</div>

                <div class="relat_user">
                  <div class="relat_user_lt">任务跟进人员：{{ item.taskPerson ? item.taskPerson : '-' }}</div>
                  <div class="relat_user_rt">应跟进时间：{{ item.shuldFollowTime ? item.shuldFollowTime : '-' }}</div>
                </div>
              </div>
            </div>
            <div class="no_icon" v-else>
              <img class="no_icon_img" src="@/assets/images/no_icon.png" />
              <div class="no_icon_txt">暂无内容</div>
            </div>
          </div>
        </div>
      </van-col>
    </van-row>
    <FollowEdit
      :visible="followEditVisible"
      :billId="detailId"
      @close="followEditVisible = false"
      :max-next-follow-date="maxNextFollowDate"
      :dataSource="dataSource"
      @initData="initData"
      :pageType="1"
    ></FollowEdit>
    <!-- 群成员列表 -->
    <van-dialog v-model="showUser" title show-cancel-button :showConfirmButton="false" :before-close="beforeClose">
      <van-pull-refresh class="userList_content h600" v-model="userRefreshing" @refresh="userOnRefresh">
        <van-list
          v-model="userLoading"
          :finished="userFinished"
          finished-text="没有更多了"
          @load="showUserData"
          v-if="wxUserList && wxUserList.length != 0"
        >
          <div class="contact_list">
            <div class="contact_item flex userList_item membot" v-for="(item, index) in wxUserList" :key="index">
              <div class="contact_lt flex">
                <img class="contact_header" src="@/assets/images/header_img.png" />
                <div class="contact_name">{{ item.menberName ? item.menberName : '-' }}</div>
              </div>
              <div class="contact_type">{{ item.memberType ? item.memberType : '-' }}</div>
            </div>
          </div>
        </van-list>
        <div class="no_icon pt80" v-else>
          <img class="no_icon_img" src="@/assets/images/no_icon.png" />
          <div class="no_icon_txt">暂无数据</div>
        </div>
      </van-pull-refresh>
    </van-dialog>
    <TaskTypeSelect
      :visible="showSelectPicker"
      @close="showSelectPicker = false"
      @multipleSubmit="multipleSubmit"
      :value="followParams.taskTypeId"
      :list="taskTypeList"
    ></TaskTypeSelect>
    <div v-if="dataSource.oneBillStauts == '未处理'" class="phoneNumberIcon"  @click="showCall=true">
      <!-- <van-icon name="phone" size="30" color="#00BE63"/> -->
      <i class="iconfont icon-dialpad" style="color:#409eff;font-size:35px;" />
    </div>
    <van-dialog v-model="showCall" confirm-button-text="取消" confirm-button-color="#ff1100" width="500px" >
      <div class="calldialogClass">
          <div style="text-align: right;width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: center;">
            <input v-model="calltel"  @input="calltel = calltel.replace(/[^\d]/g, '').slice(0, 11)" maxlength="11" type="tel" placeholder="请输入客户号码" style="width: 40%;border: 1px solid;border-radius: 10px;font-size: 20px;padding: 0 10px;" placeholder-class="input-placeholder"
             />
          <div class="callButtonClass" style="text-align: center;width: 2rem;font-size: 20px;padding: 10px;"   @click="handleTel(getAllName('车主',''),calltel)">
            拨号
          </div>
          </div>
      </div>
    </van-dialog>

    <!--  更新保养记录  -->
    <van-dialog v-model="updateMaintainVisible" width="20%" title="保养记录登记" show-confirm-button show-cancel-button @confirm="handleUpdateMaintainConfirm">

      <div style="height: 300px">
        <van-field v-model="updateMaintainData.vinCode" label="车架号码" input-align="right" readonly/>
        <van-field v-model="updateMaintainData.maintainDate" label="保养时间" input-align="right" required readonly clickable @click="showPickerDate=true;" placeholder="点击选择时间">
        </van-field>
        <van-field v-model="updateMaintainData.maintainMileage" label="保养里程" input-align="right" required placeholder="请输入里程数">
          <template slot="button">km</template>
        </van-field>
      </div>
      <van-popup v-model="showPickerDate" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          @confirm="handleConfirmDate"
          @cancel="showPickerDate=false"
        />
      </van-popup>
    </van-dialog>
  </div>
</template>

<script>
import {
  DatetimePicker,
  Dialog,
  Empty,
  Field,
  Form,
  ImagePreview,
  Notify,
  Search,
  Tab,
  Tabs,
  Toast,
  Uploader
} from 'vant'
import taskApi from '@/api/taskApi'
import repairApi from '@/api/repairApi'
import progressCustom from '@/components/progress/progressCustom'
import { getCookies, isPhone } from '@/utils/util.js'
import carApi from '@/api/carApi'
import FollowEdit from '../../taskCenter/components/FollowEdit.vue'
import commonApi from '@/api/commonApi'
import TaskTypeSelect from '../../taskCenter/components/TaskTypeSelect'
import aiccCallApi from '@/apiaicc/aiccCallApi'
import axios from 'axios'
import qs from 'qs'

const base_url = process.env.BASE_API

export default {
  name: 'taskCenterDetail',
  components: {
    Search,
    Empty,
    Field,
    Form,
    Uploader,
    DatetimePicker,
    Tab,
    Tabs,
    ImagePreview,
    Toast,
    FollowEdit,
    TaskTypeSelect,
    progressCustom,
    Dialog,
  },
  props: {
    detailId: {
      type: String,
      default: null,
    },
  },

  watch: {
    detailId: {
      handler: function (val, oldVal) {
        if (val) {
          this.getDetail(val)
        }
      },
      deep: true,
      immediate: false,
    },
    audioId: function (val, nval) {
      console.log(1)
      let that = this
      if (val != nval) {
        var audios = document.getElementById('audio')
        audios.load()
        clearInterval(that.playInv)
        that.playTime = 0
        that.playIngTime = 0
        // if(nval!=''){
        //   that.audioStatus=''
        // }
      }
    },
  },
  data() {
    return {
      followEditVisible: false,
      showTimerPicker: false,
      dataSource: {
        billId: '1', //单据id
        taskTypeName: '', //任务类型
        taskName: '', //任务名称
        oneBillStatus: '', //任务一级状态
        twoBillStatus: '', //任务二级状态
        carModelName: '', //车型
        customerName: '', //客户名称
        mobile: '', //电话
        ownerName: '', //车主姓名
        ownerPhone: '', //车主电话
        contractPeople: '', //送修人姓名
        contractPhone: '', //送修电话
        taskCreateTime: '', //任务生成时间
        carNo: '', //车牌号
        carId: '', //车牌ID
        taskPerson: '', //任务跟进人
        lastFollowInTime: '', //最近跟进时间
        followType: '', //跟进方式
        taskDes: '', //任务描述
        followEntry: [
          // {
          //   entryId: '1', //分录ID
          //   followDate: '08-09', //跟进日期
          //   followNumber: '2099233', //跟进编码
          //   nextFollowDate: '2023-07-07', //下次跟进日期
          //   followResult: '预约回店', //跟进结果
          //   followType: '手机', //跟进方式
          //   followSupple: '', //跟进补充
          //   failed: '', //战败原因
          //   followPerson: '张三', //跟进人
          //   followNote: '跟进备注' //跟进备注
          // },
          // {
          //   entryId: '1', //分录ID
          //   followDate: '08-09', //跟进日期
          //   followNumber: '2099233', //跟进编码
          //   nextFollowDate: '2023-07-07', //下次跟进日期
          //   followResult: '预约回店', //跟进结果
          //   followType: '手机', //跟进方式
          //   followSupple: '', //跟进补充
          //   failed: '', //战败原因
          //   followPerson: '张三', //跟进人
          //   followNote: '跟进备注' //跟进备注
          // }
        ],

        timer: '',
        brand: '',
        repairId: '',
        userName: '',
        car: '',
        vin: '',
        carNo: '',
        tel: '',
        repair: '',
        mileage: '',
        label: [],
      },
      uploader: [],
      columns: [],
      showSelectPicker: false,
      disabled: false,
      tabActive: 0,
      recordList: [
        // {
        //   id: 1,
        //   name: '闽D66666定期保养招揽',
        //   status: 2,
        //   insure: 2,
        //   time: '2023-06-25 12:29:30',
        //   address: '福建省厦门市思明区',
        //   vin: 'LKHHAHHHAHHHHAYYYYA',
        //   tel: '13333333333',
        //   userName: '张某某',
        //   servieName: '高某某',
        //   carType: ' CT5 2,0T',
        //   mileage: '9999'
        // },
        // {
        //   id: 2,
        //   name: '闽D66666',
        //   status: 2,
        //   insure: 2,
        //   time: '2023-06-25 12:29:30',
        //   address: '福建省厦门市思明区',
        //   vin: 'LKHHAHHHAHHHHAYYYYA',
        //   tel: '16666666666',
        //   userName: '张某某',
        //   servieName: '高某某',
        //   carType: ' CT5 2,0T',
        //   mileage: '9999'
        // }
      ],
      statusList: [
        {
          name: '已处理',
          code: 1,
          check: false,
        },
        {
          name: '未处理',
          code: 2,
          check: false,
        },
      ],
      userId: getCookies('userId'), //用户ID，必填，String
      carInfo: {
        id: '', //单车id
        vinCode: '', //车架号
        fixCenterId: '', //维修中心ID
        fixCenterName: '', //维修中心名称
        fixCenterNumber: '', //维修中心编码
        serverPsnId: '', //所属服务顾问ID
        serverPsnName: '', //所属服务顾问名字
        serverPsnNumber: '', //所属服务顾问编码
        carModelId: '', //车型ID
        carModelNameName: '', //车型名称
        carModelNumber: '', //车型编码
        lastIn: '', //上次进场时间
        carMile: '', //行驶里程数
        deliverTime: '', //购车时间
        inusuranceDate: '', //保险到期时间
        repairtime: '', //保修到期时间
        label: [], //标签
      },
      cardList: [],
      repairList: [
        // {
        //   repairNumber: '111',
        //   repairNo: 'SRGGGGGAAA-001',
        //   repairWorkBillType: '一般工单',
        //   serviceName: '张某某',
        //   time: '2023-09-01 15:30',
        //   allPrice: 2020,
        //   carPrice: 1000,
        //   remark:
        //     '更换蓄电池；更换蓄电池；更换蓄电池；更换蓄电池；更换蓄电池；更换蓄电池；更换蓄电池；更换蓄电池',
        //   status: '已开工单',
        //   repairBizDate: '2023-09-01 15:30',
        //   repairVoucherAmt: '600',
        // },
      ],
      applyParams: {
        codeNo: '', //车架号或者车牌号，String，必填
        pageNo: 1, //当前页数，默认从1开始，每页显示十条，int，不能为空或者小于1
        startDateIn: '', //预约开始时间，日期yyyy-MM-dd
        endDateIn: '', //预约结束时间，日期yyyy-MM-dd
        fixCenterId: '', //维修中心ID值
        serverPsnId: '', //所属服务顾问，ID值
        billStatus: '', //预约单状态
        bookingType: '', //预约单类型
        fixCenterName: '',
        serverPsnName: '',
        enDateIn: '',
        billSatus: '',
      },
      relevanceParams: {
        codeNo: '', //车架号或者车牌号，String，必填
        pageNo: 1, //当前页数，默认从1开始，每页显示十条，int，不能为空或者小于1
        oneBillStatus: 'unDeal', //任务一级状态
        twoBillStatus: '', //任务二级状态
        taskTypeId: '', //任务类型ID值
        taskPersonId: '', //任务跟进人，ID值
        fixCenterId: '',
        serverPsnId: '',
        taskStartCreateTime: '',
        taskEndCreateTime: '',
        isExceed: '', //是否逾期，1为是，0为否
        isGenRepBook: '', //是否生成维修预约单
        billId: '', //本身单据ID，此为详细界面使用
        carId: '', //车辆ID，此为详细界面使用
        isFactTask: '', //是否厂家任务
        isHuiYuan: '', //是否会员客户
        isHYCar: '', //是否会员绑定车辆
        userId: getCookies('userId'), //用户ID，必填，String
      },
      applyList: [],
      relevanceList: [],
      repairRequestParams: {
        codeNo: '', //车架号或者车牌号，String，必填
        pageNo: 1, //当前页数，默认从1开始，每页显示十条，int，不能为空或者小于1
        startDateIn: '', //进场开始时间，日期yyyy-MM-dd
        endDateIn: '', //进场结束时间，日期yyyy-MM-dd
        startFinishDate: '', //完工开始时间，日期yyyy-MM-dd
        endFinishDate: '', //完工结束时间，日期yyyy-MM-dd
        startSettleTime: '', //结算开始时间，日期yyyy-MM-dd
        endSettleTime: '', //结算结束时间，日期yyyy-MM-dd
        workBillType: '', //工单类型，枚举
        serverPsnId: '', //维修中心ID
        fixCenterId: '', //服务顾问ID
        userId: getCookies('userId'), //用户ID，必填，String
      },
      relatTabList: [
        {
          name: '未处理',
          value: 'unDeal',
        },
        {
          name: '已处理',
          value: 'isDeal',
        },
      ],
      relatTabIndex: 0,
      finished: false,
      refreshing: false,
      isLoadData: false,
      loading: false,
      groupList: [],
      wxUserList: [],
      showUser: false,
      groupRefreshing: false,
      groupLoading: false,
      groupFinished: false,
      groupPageNo: 1,
      groupIsLoadData: false,

      userRefreshing: false,
      userLoading: false,
      userFinished: false,
      userPageNo: 1,
      userIsLoadData: false,
      groupData: {},
      userInfo: JSON.parse(localStorage.getItem('userInfo')),
      taskTypeList: [],
      followParams: {
        carId: '', //车辆ID，必填，
        taskTypeId: '', //任务类型ID，多个勇;隔开
        isDesc: true, //布尔类型，必填，true为倒序
        taskTypeName: '',
      },
      followRefreshing: false,
      followLoading: false,
      followFinished: false,
      followPageNo: 1,
      followHistoryList: [],
      followIsLoadData: false,
      audioStatus: 'pause',
      playIndex: '-1',
      audioTime: '',
      playTime: 0, //播放进度条
      playIngTime: 0, //播放时间
      playInv: '',
      tapeFile: '',
      audioId: '',
      showCall:false ,
      calltel:"",

      // 保养记录登记
      updateMaintainVisible: false,
      showPickerDate: false,
      updateMaintainData: {
        carId: '',
        vinCode: '',
        maintainDate: '',
        maintainMileage: '',
      },
      currentDate: new Date(),
      carInfoKhyy: {}, //运营门店维度车辆信息
      maxNextFollowDate: '', //最大下次跟进时间
    }
  },

  mounted() {
    // if (this.$route.query) {
    //   this.detailId = this.$route.query.billId
    //   this.getDetail(this.detailId)
    // }
  },
  methods: {
    handleRelatChange(index) {
      this.relatTabIndex = index
      this.relevanceParams.oneBillStatus = this.relatTabList[index].value
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        overlay: true,
      })
      this.getRelevanceTask()
    },
    async getDetail(billId) {
      taskApi
        .getCustomerTaskById({
          billId,
          userId: this.userId,
        })
        .then(async (res) => {
          if (res.data) {
            console.log("任务信息：", res.data)
            this.dataSource = res.data
            // 最大下次跟进时间
            if (this.dataSource.taskTypeName=='续保到期提醒' && this.dataSource.renewalNode) {
              if (this.dataSource.taskExceedTime) {
                this.maxNextFollowDate = new Date(this.dataSource.taskExceedTime)
                if (this.dataSource.duration) {
                  this.maxNextFollowDate.setDate(this.maxNextFollowDate.getDate() + this.dataSource.duration)
                }
              }
            } else {
              this.maxNextFollowDate = ''
            }

            await this.getFollowCallMsg()
            this.getCoupon(this.dataSource.carId)
            this.getCarInfoBase(this.dataSource.carId)
            // this.getApplyRecord()
            this.getRelevanceTask()
            this.getRepairworkorder()
            this.groupPageNo = 1
            this.userPageNo = 1
            this.getCustomerGroupInfo()
            this.getTaskType()
            // window.scrollTo({
            //   top: 0,
            //   behavior: 'smooth'
            // })
          }
        })
    },
    // 获取卡券信息
    getCoupon(id) {
      repairApi
        .getCoupon({
          id,
          userId: this.userId,
          isReturnInvalidCoupons: '是'
        })
        .then((res) => {
          this.cardList = res.data
        })
    },
    // 车辆详情
    getCarInfoBase(id) {
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        overlay: true,
      })
      carApi
        .getCarInfoBase({
          id,
        })
        .then((res) => {
          Toast.clear()
          if (res.code == 1) {
            res.data.label = res.data.label ? res.data.label.split(';') : []
            if (res.data && res.data.label && res.data.label.length != 0) {
              res.data.label.length = res.data.label.length - 1
            }

            this.carInfo = res.data
            this.queryCarInfoKhyy(id, this.carInfo.fixCenterId)
            // let  carInfo = {
            //   fixCenterId:this.carInfo.fixCenterId,
            //   fixCenterName: this.carInfo.fixCenterName,
            //   carModelId: this.carInfo.carModelNameId,
            //   carModelName: this.carInfo.carModelNameName,
            //   carNo: this.carInfo.carNo,
            // }
            // store.commit("setAddCarInfo",carInfo );
          }
        })
    },
    // 预约记录
    getApplyRecord() {
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        overlay: true,
      })
      repairApi
        .queryRepairBooking({
          ...this.applyParams,
          codeNo: this.dataSource.carNo,
        })
        .then((res) => {
          Toast.clear()
          this.applyList = res.data
        })
    },

    // 关联任务
    getRelevanceTask() {
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        overlay: true,
      })
      taskApi
        .getCustomerTaskList({
          ...this.relevanceParams,
          codeNo: this.dataSource.vinCode,
          billId: this.dataSource.billId,
        })
        .then((res) => {
          Toast.clear()
          this.relevanceList = res.data
        })
    },

    // 履历
    getRepairworkorder(id) {
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        overlay: true,
      })
      // if (this.isLoadData) return
      // this.isLoadData = true
      // this.loading = true
      // this.finished = false
      carApi
        .getRepairworkorder({
          id: this.dataSource.carId,
        })
        .then((res) => {
          this.repairList = res.data
          this.finished = true
          Toast.clear()

          // if (res.code == 0) {
          // }
          // if (this.repairRequestParams.pageNo == 1) {
          //   this.repairList = res.data || []
          // } else {
          //   this.repairList = this.recordList.concat(res.data || [])
          // }

          // this.repairRequestParams.pageNo += 1
          // if (res.data.length < 10) {
          //   this.finished = true
          //   this.isLoadData = true
          // }
          // this.isLoadData = false
          // this.loading = false
        })
        .catch((res) => {
          // this.loading = false
          // this.isLoadData = false
        })
    },
    // 下拉刷新
    onRefresh() {
      // 清空列表数据
      this.recordList = []
      this.finished = false
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.refreshing = false
      this.getRepairworkorder()
    },

    //维修预约
    applyRepair() {
      this.$router.push({
        path: 'applyRepairEdit',
        query: {
          taskId: this.dataSource.billId,
          carId: this.dataSource.carId,
        },
      })
    },
    // 获取list名称
    getFieldName(list, key, val) {
      if (list && list.length > 0) {
        let obj = list.filter((item) => {
          return item[key] == val
        })
        if (obj.length > 0) {
          return obj[0].name
        }
      }
      return null
    },
    // 图片预览
    previewImg() {
      ImagePreview([
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2F2020%2F555%2F900%2F14381009555_1565283795.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1693918952&t=87f1097ef82261cd8c0511a89a676704',
      ])
    },
    // 添加跟进记录
    addFollow() {
      this.followEditVisible = true
    },
    getAllName(type,name){
      console.log(name,'getAllName');
      // let allname=this.dataSource.carNo ? this.dataSource.carNo:(this.dataSource.vinCode ? this.dataSource.vinCode:"")
      let allname=this.dataSource.carNo ? this.dataSource.carNo:(this.dataSource.vinCode ? "VIN:"+this.dataSource.vinCode.substring(this.dataSource.vinCode.length - 6):"")
      return allname+type+(name?name:"");
    },
    handleTel(telname, tel) {
      console.log('handleTel-isAiccUser', localStorage.getItem('isAiccUser'))
      if (localStorage.getItem('isAiccUser') + '' == 'true') {
        if (this.dataSource.oneBillStauts != '未处理') {
          Toast('该任务已处理完成，无需再次联系客户')
          return
        }
        this.call(telname, tel)
      } else {
        //走之前的方法
        if (isPhone()) {
          window.location.href = `tel:${tel}`
        } else {
          Toast('请在手机端使用此功能')
        }
      }
    },
    goTaskDetail(data) {
      this.$router.push({
        path: '/taskCenterDetail',
        query: {
          billId: data.billId,
        },
      })
    },
    goApplyDetail(data) {
      this.$router.push({
        path: '/applyRepairDetail',
        query: {
          billId: data.billId,
        },
      })
    },
    goRepairDetail(data) {
      this.$router.push({
        path: '/repairOrderDetail',
        query: {
          billId: data.repairId,
        },
      })
    },
    initData() {
      this.$emit('initData')
    },
    // 下拉刷新
    groupOnRefresh() {
      // 清空列表数据
      this.groupList = []
      this.groupFinished = false
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.groupLoading = true
      this.groupRefreshing = false
      this.groupInitData()
    },
    groupInitData() {
      this.groupPageNo = 1
      this.getCustomerGroupInfo()
    },
    // 获取群信息
    getCustomerGroupInfo() {
      if (this.groupIsLoadData) return
      this.groupIsLoadData = true
      this.groupLoading = true
      this.groupFinished = false
      taskApi
        .getCustomerGroupInfo({
          carNo: this.dataSource.carNo || 'undefined', //车牌号码，
          wetChatId: this.userInfo.corpGroup ? this.userInfo.corpGroupId : this.userInfo.corpId, //企业微信ID，
          pageNo: this.groupPageNo, //当前页数，默认从1开始，每页显示十条，int，不能为空或者小于1
        })
        .then((res) => {
          Toast.clear()
          if (this.groupPageNo == 1) {
            this.groupList = res.data || []
          } else {
            this.groupList = this.groupList.concat(res.data || [])
          }
          this.groupPageNo += 1

          if (res.data.length < 10) {
            this.groupFinished = true
            this.groupIsLoadData = true
          }
          this.groupIsLoadData = false
          this.groupLoading = false
        })
        .catch((res) => {
          this.groupLoading = false
          this.groupIsLoadData = false
        })
    },

    handleShowUser(data) {
      this.showUser = true
      this.groupData = data
      this.userInitData()
    },
    beforeClose(action, done) {
      if (action === 'confirm') {
        return done(false)
      } else {
        this.wxUserList = []
        return done()
      }
    },

    // 群成员下拉刷新
    userOnRefresh() {
      // 清空列表数据
      this.wxUserList = []
      this.userFinished = false
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.userLoading = true
      this.userRefreshing = false
      this.userInitData()
    },
    userInitData() {
      this.userPageNo = 1
      this.showUserData()
    },
    //  查看群成员
    showUserData() {
      if (this.userIsLoadData) return
      this.userIsLoadData = true
      this.userLoading = true
      this.userFinished = false
      taskApi
        .getMemberInfo({
          groupId: this.groupData.groupId, //企业群ID，必填
          // groupId: '3104758703119260', //企业群ID，必填
          pageNo: this.userPageNo, //当前页数，默认从1开始，每页显示十条，int，不能为空或者小于1
        })
        .then((res) => {
          res.data.forEach((item) => {
            item.memberType = item.memberType.replace('["', '')
            item.memberType = item.memberType.replace('"]', '')
          })
          console.log(this.wxUserList)
          Toast.clear()
          if (this.userPageNo == 1) {
            this.wxUserList = res.data || []
          } else {
            this.wxUserList = this.wxUserList.concat(res.data || [])
          }
          this.userPageNo += 1

          if (res.data.length < 10) {
            this.userFinished = true
            this.userIsLoadData = true
          }
          this.userIsLoadData = false
          this.userLoading = false
        })
        .catch((res) => {
          this.userLoading = false
          this.userIsLoadData = false
        })
    },
    // 获取任务类型
    getTaskType() {
      commonApi.getTaskType({}).then((res) => {
        this.taskTypeList = res.data
        this.taskTypeList.unshift({
          name: '全部',
          billId: '',
        })
        this.followParams.taskTypeName = this.taskTypeList[0].name
        this.followParams.taskTypeId = this.taskTypeList[0].billId
        this.followInitData()
      })
    },
    // 历史跟进数据刷新
    followOnRefresh() {
      // 清空列表数据
      this.followHistoryList = []
      this.followFinished = false
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.followLoading = true
      this.followRefreshing = false
      this.followInitData()
    },
    followInitData() {
      this.followPageNo = 1
      this.getFollowData()
    },
    //  获取历史跟进
    async getFollowData() {
      if (this.followIsLoadData) return
      this.followIsLoadData = true
      this.followLoading = true
      this.followFinished = false
      Toast.loading('数据加载中...')
      this.followParams.carId = this.dataSource.carId
      taskApi
        .getCustomerTaskHisFollow({
          pageNo: this.followPageNo, //当前页数，默认从1开始，每页显示十条，int，不能为空或者小于1
          ...this.followParams,
        })
        .then(async (res) => {
          Toast.clear()
          if (this.followPageNo == 1) {
            await this.getFollowHistoryCalls(res.data)
            this.followHistoryList = res.data || []
          } else {
            await this.getFollowHistoryCalls(res.data)
            this.followHistoryList = this.followHistoryList.concat(res.data || [])
          }
          this.followPageNo += 1

          if (res.data.length < 10) {
            this.followFinished = true
            this.followIsLoadData = true
          }
          this.followIsLoadData = false
          this.followLoading = false
        })
        .catch((res) => {
          this.followLoading = false
          this.followIsLoadData = false
        })
    },

    // 多选确认
    multipleSubmit(data) {
      console.log('data', data)
      if (data && data.length != 0) {
        let arr = []
        const containsValue = data.some((item) => item.billId == '')
        if (containsValue) {
          this.followParams.taskTypeName = '全部'
          this.followParams.taskTypeId = ''
        } else {
          this.followParams.taskTypeName = data.map((item) => item.name).join(',')
          let ids = data.map((item) => item.billId)
          ids.forEach((item) => {
            arr.push(item)
          })
          this.followParams.taskTypeId = arr.join(';')
        }

        this.followInitData()
      }
    },
    // 打开任务类型下拉
    handleSelectTaskType() {
      this.showSelectPicker = true
    },
    handleDateOrder() {
      this.followParams.isDesc = !this.followParams.isDesc
      this.followInitData()
    },
    isDateGreater(dateStr1, dateStr2) {
      const date1 = new Date(dateStr1)
      const date2 = new Date(dateStr2)
      return date1 > date2
    },
    handleDealTask(data) {
      if (data.oneBillStatus == '未处理') {
        if (this.isDateGreater(data.shuldFollowTime, new Date()) && data.sourceBillId == this.dataSource.billId) {
          // 应跟进时间大于当前日期
          Toast('该任务为当前任务所生成的子任务，尚未到达处理时间，可暂不处理')
        } else {
          this.getDetail(data.billId)
        }
      }
    },
    async getFollowHistoryCalls(data) {
      let that = this
      if (data != null && data.length > 0) {
        for (var i = 0; i < data.length; i++) {
          var billId = data[i].billId
          // that.$set(that.dataSource.followEntry[i],"calls", [])
          data[i].calls = []
          await aiccCallApi
            .getFollowCall({
              billId: billId,
            })
            .then((res) => {

              if (res.code == 0) {
                // that.$set(that.dataSource.followEntry[i],"calls", res.data)

                let calls = res.data
                if (calls!=null && calls.length>0) {
                  calls.forEach((item) => {
                    this.getAudioLength(item)
                  })
                  data[i].calls = calls
                }

              }
            })
          console.log(data, 'getFollowHistoryCalls')
        }
      }
    },
    async getFollowCallMsg() {
      let that = this
      if (that.dataSource.followEntry != null && that.dataSource.followEntry.length > 0) {
        for (var i = 0; i < that.dataSource.followEntry.length; i++) {
          var billId = that.dataSource.followEntry[i].parentId
          // that.$set(that.dataSource.followEntry[i],"calls", [])
          that.dataSource.followEntry[i].calls = []
          await aiccCallApi
            .getFollowCall({
              billId: billId,
            })
            .then((res) => {
              if (res.code == 0) {
                // that.$set(that.dataSource.followEntry[i],"calls", res.data)
                let calls = res.data
                if (calls!=null && calls.length>0) {
                  calls.forEach((item) => {
                    this.getAudioLength(item)
                  })
                  that.dataSource.followEntry[i].calls = calls
                }
              }
            })
          console.log(that.dataSource, 'dataSource')
        }
      }
    },
    call(telname, tel) {
      let vm = this
      if (tel === '' || tel === null) {
        Dialog.alert({
          title: '',
          message: '号码不能为空',
        }).then(() => {
          // on close
        })
        return
      } else {
        //手机
        if (!vm.validMobile(tel)) {
          Dialog.alert({
            title: '',
            message: '号码不正确',
          }).then(() => {
            // on close
          })
          return
        }
      }
      let isPc = vm.checkIsPC()
      Toast.loading({
        message: '拨打中，请稍后...',
        forbidClick: true,
        overlay: true,
      })
      // isPc = true
      if (isPc) {
        //如果是PC端
        vm.doPcCallOut(telname, tel, isPc)
      } else {
        //唤起小程序
        vm.doMobileCallout(telname, tel, isPc)
      }
    },
    doMobileCallout(telname, tel, isPc) {
      let vm = this
      aiccCallApi
        .callOut({
          customerNumber: tel,
          customerName: telname,
          billId: this.dataSource.billId,
          billOrgId: null,
          carId: this.dataSource.carId,
          carModelName: this.dataSource.carModelName,
          fixCenterId: this.dataSource.fixCenterId,
          fixCenterName: this.dataSource.fixCenterName,
          insCmpName: this.dataSource.insCmpName,
          type: isPc == true ? 'pc' : 'phone',
        })
        .then((callres) => {
          console.log('AICC获取tokenInfo成功返回信息:', callres)
          if (callres.code == 0) {
            vm.tokenInfo = callres.data
            vm.toMiniprogram()
          } else {
            Toast.clear()
            Dialog.alert({
              title: '',
              message: callres.msg,
            }).then(() => {
              // on close
            })
            if (res.code == -900 && res.msg == '坐席未绑定手机号码,请先绑定手机号码') {
              this.$router.push('/seatPhone')
            }
          }
        })
    },
    // 评估申请跳转小程序
    toMiniprogram() {
      let vm = this
      axios({
        url: `${base_url}/proxy/qywx/jsdkConfig`,
        method: 'post',
        data: qs.stringify(
          // { url: 'http://wycl.autocnd.com:41080/ysc/assessManageDetail' },
          {
            url: location.href.split('?')[0],
            type: 'app',
          },
          {
            encode: false,
          }
        ),
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          satoken: getCookies('token'),
        },
      }).then((res) => {
        console.log('jsdkConfig:', res)
        let jsdk = res.data.data
        localStorage.setItem('jsdk', JSON.stringify(res.data.data))
        wx.agentConfig({
          corpid: jsdk.corpid, // 必填，企业微信的corpid，必须与当前登录的企业一致
          agentid: jsdk.agentid, // 必填，企业微信的应用id （e.g. 1000247）
          timestamp: jsdk.timestamp, // 必填，生成签名的时间戳
          nonceStr: jsdk.nonceStr, // 必填，生成签名的随机串
          signature: jsdk.signature, // 必填，签名，见附录-JS-SDK使用权限签名算法
          jsApiList: ['launchMiniprogram'], //必填，传入需要使用的接口名称
          success: function (res) {
            console.log('agentConfig权限成功返回信息:', res)
            // wx9e482fe1abf18c87
            // appid: 'wx02e51afc29cecca4', // 需跳转的小程序appid
            wx.invoke(
              'launchMiniprogram',
              {
                appid: vm.tokenInfo.appId, // 需跳转的小程序appid
                // appid: 'wx9e482fe1abf18c87', // 测试跳转的appid
                path: `pages/calling/calling?token=${vm.tokenInfo.token}&enterpriseId=${vm.tokenInfo.enterpriseId}&cno=${vm.tokenInfo.cno}&called_number=${vm.tokenInfo.calledNumber}&platform=${vm.tokenInfo.platform}&type=1`, // 所需跳转的小程序内页面路径及参数
              },
              function (res) {
                Toast.clear()
                if (res.err_msg == 'launchMiniprogram:ok') {
                  // 正常
                } else {
                  // 错误处理
                }
              }
            )
          },
          fail: function (res) {
            Toast.clear()
            console.log('agentConfig权限失败返回信息:', res)
            if (res.errMsg.indexOf('function not exist') > -1) {
              alert('版本过低请升级')
            }
          },
        })
      })
    },
    doPcCallOut(telname, tel, isPc) {
      aiccCallApi
        .callOut({
          customerNumber: tel,
          customerName: telname,
          billId: this.dataSource.billId,
          billOrgId: null,
          carId: this.dataSource.carId,
          carModelName: this.dataSource.carModelName,
          fixCenterId: this.dataSource.fixCenterId,
          fixCenterName: this.dataSource.fixCenterName,
          insCmpName: this.dataSource.insCmpName,
          type: isPc == true ? 'pc' : 'phone',
        })
        .then((res) => {
          Toast.clear()
          if (res.code == 0) {
            Notify({
              type: 'success',
              message: '呼叫成功，请稍后',
            })
          } else {
            Dialog.alert({
              title: '',
              message: res.msg,
            }).then(() => {
              // on close
            })
            if (res.code == -900 && res.msg == '坐席未绑定IP话机,请先绑定IP话机') {
              this.$router.push('/seatPhone')
            }
          }
        })
    },
    validMobile(str) {
      return /^1[3456789]\d{9}$/.test(str) || /^0[0-9-]{10,13}$/.test(str)
    },
    checkIsPC() {
      var userAgentInfo = navigator.userAgent
      var Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']
      var flag = true
      for (var v = 0; v <= Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) >= 0) {
          flag = false
          break
        }
      }
      return flag
    },
    play(data, index) {
      let that = this
      if (data.localRecordFile) {
        let that = this
        let param = {
          id: data.id,
          type: 1,
        }
        aiccCallApi.getCallTap(param).then((res) => {
          if (res.code == 0) {
            that.tapeFile = res.data
            console.log('tapeFile-', this.tapeFile)
            that.audioId = that.tabIndex + '-' + index
            console.log('tapeFile-', this.tapeFile)
            that.audioStatus = index
            var audios = document.getElementById('audio')
            // audio.src=data.localRecordFile
            // audios.src=this.tapeFile
            that.playIndex = index
            console.log(that.audioStatus)

            setTimeout(() => {
              audios.play()
              that.playInv = setInterval(() => {
                if (that.playIngTime >= data.bridgeDuration) {
                  clearInterval(that.playInv)
                  that.audioStatus = ''
                  audios.pause()
                  that.playTime = 0
                  that.playIngTime = 0
                  that.playIndex = '-1'
                } else {
                  that.playIngTime++
                  // that.playTime += 100 / audios.duration
                  if (that.playTime < 100) {
                    that.playTime += 100 / data.bridgeDuration
                  } else {
                    that.playTime = 100
                  }
                }
              }, 1000)
            }, 500)
          } else {
            Dialog.alert({
              title: '',
              message: res.msg,
            }).then(() => {
              // on close
            })
          }
        })
      } else {
        Dialog.alert({
          title: '',
          message: '该记录暂无音频',
        }).then(() => {
          // on close
        })
      }
    },
    stop(index) {
      let that = this
      console.log(that.playIndex)
      var audios = document.getElementById('audio')
      audios.pause()
      that.audioStatus = index
      clearInterval(that.playInv)
      this.playIndex = '-1'
    },
    getAudioTime() {
      var audios = document.getElementById('audio')
      let long = parseInt(audios.duration)
      let min = parseInt((long / 60) % 60)
      let seconds = Math.ceil(long % 60)
      let formateSeconds = seconds > 59 ? 59 : seconds
      this.audioTime = `${min < 10 ? '0' + min : min}:${formateSeconds < 10 ? '0' + formateSeconds : formateSeconds}`
    },
    formateTime(time) {
      let long = parseInt(time)
      let min = parseInt((long / 60) % 60)
      let seconds = Math.ceil(long % 60)
      let formateSeconds = seconds > 59 ? 59 : seconds
      return `${min < 10 ? '0' + min : min}:${formateSeconds < 10 ? '0' + formateSeconds : formateSeconds}`
    },
    /**
     * @param {Object} pre 拖动
     */
    updateAudio(pre, tab, call) {
      // setTimeout(function() {
      let that = this
      let id = tab + call.id
      console.log(that.playIndex)
      that.stop(id)
      that.playIndex = id
      that.audioId = that.tabIndex + '-' + id
      var audios = document.getElementById('audio')
      that.tapeFile = call.localRecordFile
      // let time = Math.round((audios.duration * pre * 0.01).toFixed(2))
      setTimeout(function () {
        let time = audios.duration * pre * 0.01
        audios.currentTime = time.toFixed(2)
        that.playIngTime = Math.round(time)
        that.playTime = Math.round(pre)
        that.audioStatus = id
        audios.play()
        that.playInv = setInterval(() => {
          if (that.playIngTime >= call.bridgeDuration) {
            clearInterval(that.playInv)
            that.audioStatus = id
            audios.pause()
            that.playTime = 0
            that.playIngTime = 0
          } else {
            that.playIngTime++
            // that.playTime += 100 / audios.duration
            if (that.playTime < 100) {
              that.playTime += 100 / call.bridgeDuration
            } else {
              that.playTime = 100
            }
          }
        }, 1000)
      }, 500)
    },
    goAsr(data) {
      this.$router.push({
        path: '/asr',
        query: {
          billId: data.id,
          billType: 1,
        },
      })
    },
    openChat(item) {
      axios({
        url: `${base_url}/proxy/qywx/jsdkConfig`,
        method: 'post',
        data: qs.stringify(
          // { url: 'http://wycl.autocnd.com:41080/ysc/assessManageDetail' },
          { url: location.href.split('?')[0], type: 'app' },
          { encode: false },
        ),
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          satoken: getCookies('token'),
        },
      }).then((res) => {
        console.log('jsdkConfig:', res)
        let jsdk = res.data.data
        wx.agentConfig({
          corpid: jsdk.corpid, // 必填，企业微信的corpid，必须与当前登录的企业一致
          agentid: jsdk.agentid, // 必填，企业微信的应用id （e.g. 1000247）
          timestamp: jsdk.timestamp, // 必填，生成签名的时间戳
          nonceStr: jsdk.nonceStr, // 必填，生成签名的随机串
          signature: jsdk.signature, // 必填，签名，见附录-JS-SDK使用权限签名算法
          jsApiList: ['openExistedChatWithMsg'], //必填，传入需要使用的接口名称
          success: function (res) {
            console.log('agentConfig权限成功返回信息:', res)
            wx.invoke("openExistedChatWithMsg", {
              chatId: item.groupChatId,
              // msg: {
              //   msgtype: "link",
              // }
            },function(res){
              if (res.err_msg == "openExistedChatWithMsg:ok") {
              } else {
                Notify({
                  type: 'warning',
                  message: '您暂时无权限打开该群聊！',
                })
              }
            });
          },
          fail: function (res) {
            console.log('agentConfig权限失败返回信息:', res)
            if (res.errMsg.indexOf('function not exist') > -1) {
              alert('版本过低请升级')
            }
          },
        })
      })
    },

    showUpdateMaintain(data) {
      Object.keys(this.updateMaintainData).forEach(key => delete this.updateMaintainData[key])
      this.updateMaintainVisible = true
      this.updateMaintainData.carId = data.id
      this.updateMaintainData.vinCode = data.vinCode
    },
    handleUpdateMaintainConfirm() {
      if (!this.updateMaintainData.maintainDate) {
        Notify({ type: 'danger', message: '请选择保养日期' })
        return
      }
      if (!this.updateMaintainData.maintainMileage) {
        Notify({ type: 'danger', message: '请输入保养里程' })
        return
      }
      carApi
        .carMaintainRecordAddNew({
          ...this.updateMaintainData
        })
        .then((res) => {
          if (res.code == 1) {
            Notify({ type: 'success', message: '新增成功' })
            // this.initData()
          } else {
            Notify({ type: 'danger', message: res.msg })
          }
        })
      this.updateMaintainVisible = false
    },
    handleConfirmDate(time) {
      this.updateMaintainData.maintainDate = this.formatDate(time)
      this.showPickerDate = false
    },
    formatDate(date) {
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
      if (month < 10) {
        month = '0' + month
      }
      if (day < 10) {
        day = '0' + day
      }
      return year + '-' + month + '-' + day
    },
    async getAudioLength(record) {
      let param = {
        id: record.id,
        type: record.fileStatus
      }
      await aiccCallApi.getCallTap(param).then((res) => {
        console.log(res.data)
        const audio = new Audio(res.data)
        audio.addEventListener('loadedmetadata', function() {
          console.log('audio loadedmetadata', audio.duration)
          record.bridgeDuration = audio.duration
        })
      })
    },
    queryCarInfoKhyy(carId, fixCenterId) {
      carApi.queryCarInfoKhyy({carId: carId, org_Id: fixCenterId}).then((res) => {
        if (res.code == 1) {
          this.carInfoKhyy = res.data[0]
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.con_box {
  border: 1px solid #f3f3f3;
  width: 100%;
  background: #fff;
  margin-right: 0.2rem;
  box-sizing: content-box;
  position: relative;
  margin-top: 10px;
  overflow: auto;

  &::-webkit-scrollbar {
    // display: none;
  }

  &.relation_h {
    height: 350px;
    overflow: auto;

    .no_icon {
      margin-top: 65px;
    }
  }

  /deep/.van-empty__image {
    width: 80px;
    height: 80px;
  }

  .com_title {
    position: relative;
    background: #dcdcdc;
    font-size: 0.32rem;
    padding: 0.2rem;

    &::before {
      content: '';
      background: #409eff;
      width: 4px;
      position: absolute;
      height: 20px;
      top: 7px;
      left: 0;
    }
  }
}

.followH {
  max-height: 502px;
  background: #fff;
  overflow: auto;
}

.flex {
  display: flex;
  align-items: center;
}

.registerDetail {
  background: #ebebeb;
  overflow: auto;
  height: calc(100vh - 50px);
  padding-bottom: 10px;

  &::-webkit-scrollbar {
    // display: none;
  }

  .detail_header {
    justify-content: space-between;
    margin: 0.2rem 0.2rem;
    border-radius: 5px;
    background: #fff;
    padding: 0.3rem;

    .detail_header_lt {
      .carNo {
        font-size: 0.32rem;
        font-weight: bold;
        margin-bottom: 0.2rem;
        align-items: center;

        .icon-right {
          margin-left: 0.2rem;
          color: #409eff;
        }

        .status {
          border: 1px solid #299a00;
          color: #299a00;
          padding: 0.05rem 0.2rem;
          text-align: center;
          font-size: 0.22rem;
          border-radius: 3px;
          margin-left: 0.2rem;
        }
      }

      .hank {
        font-size: 0.28rem;
        color: #666;

        .name {
          border-right: 2px solid #ccc;
          padding-right: 0.1rem;
          margin-right: 0.1rem;
        }
      }
    }

    .detail_header_rt {
      justify-content: flex-start;

      .txt {
        font-size: 0.28rem;
        color: #161616;
      }

      .icon-tel {
        font-size: 0.64rem;
        color: #35bc04;
        margin-right: 0.1rem;
        // position: relative;
        // top: -2px;
        // color: #fff;
        // background: #35bc04;
        // font-size: 0.32rem;
        // padding: 0.1rem;
        // border-radius: 50%;
        // margin-right: 0.1rem;
      }
    }
  }

  .formData {
    background: #fff;
  }
}

.labelList {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.label_item {
  color: #299a00;
  border: 1px solid #299a00;
  border-radius: 4px;
  margin-right: 0.1rem;
  padding: 0.01rem 0.2rem;
  font-size: 0.2rem;
  margin-bottom: 0.1rem;

  &:last-child {
    margin-right: 0;
  }
}

.tabBarBox {
  margin-top: 0.2rem;
}

.tabCar {
  margin-top: 0.1rem;
}

// 卡券
.cardList {
  margin: 0.1rem 0.2rem 0.3rem 0.2rem;
  box-sizing: border-box;

  .cardItem {
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    overflow: hidden;
    margin-bottom: 0.2rem;

    .box {
      overflow: hidden;

      .cardItem_lt {
        padding: 0.3rem 0.2rem;
        text-align: center;
        box-sizing: content-box;
        background: #ff58c2;
        color: #fff;
        overflow: hidden;
        height: 1.4rem;
        width: 30%;

        .price_icon {
          font-size: 0.3rem;
          color: #fff;
        }

        .price {
          color: #fff;

          .txt {
            font-size: 0.8rem;
            font-weight: bold;
          }

          .name {
            font-size: 0.28rem;
          }
        }
      }

      .cardItem_rt {
        padding: 0.3rem;
        border-bottom: 1px dashed #ccc;
        overflow: hidden;
        height: 1.4rem;
        width: 70%;

        .label_name {
          .label_txt {
            background: #ff3415;
            color: #fff;
            border-radius: 3px;
            text-align: center;
            padding: 0.07rem 0.2rem;
            font-size: 0.24rem;
            margin-right: 0.1rem;
          }

          .label_txt1 {
            color: #333;
            font-size: 0.28rem;
            font-weight: bold;
          }
        }

        .label_time {
          margin-top: 0.2rem;
          font-size: 0.26rem;
          color: #666;
        }
      }
    }

    .cardNo {
      padding: 0.2rem 0.3rem 0.2rem 0.2rem;
      font-size: 0.28rem;
      color: #333;
    }
  }
}

// 维修
.repairData {
  margin: 0.1rem 0.2rem 0.3rem 0.2rem;
  box-sizing: border-box;
  overflow: hidden;

  .repairItem {
    background: #fff;
    overflow: hidden;
    border-radius: 5px;
    padding: 0.2rem;
    margin-bottom: 0.2rem;

    .item_title {
      justify-content: space-between;
      padding: 0.1rem 0;
      border-bottom: 1px solid #f1f1f1;
      font-size: 0.28rem;
      margin-bottom: 0.3rem;
      position: relative;

      .rebox {
        font-size: 0.26rem;
        color: #666;
        margin-top: 0.1rem;

        .price {
          margin-right: 0.1rem;
        }
      }
    }

    .item_content {
      padding: 0 0.3rem;

      .item_contentbox {
        justify-content: space-between;
      }

      .item_data {
        font-size: 0.28rem;
        margin-bottom: 0.2rem;
        display: flex;

        .item_data_label {
          color: #333;
        }

        .item_data_value {
          color: #262626;

          &.txt {
            line-height: 0.32rem;
          }
        }
      }

      .item_data_width {
        width: 4.5rem;
      }
    }
  }
}

// 联系人
.contactbox {
  margin: 0.1rem 0.2rem 0.3rem 0.2rem;

  .contactItem {
    justify-content: space-between;
    background: #fff;
    padding: 0.2rem;
    margin-bottom: 0.1rem;
    border-radius: 4px;

    .contact_lt {
      .header {
        margin-bottom: 0.2rem;
        color: #333;

        .txt {
          font-size: 0.2rem;
          margin-right: 0.2rem;
          background: #409eff;
          padding: 0.1rem 0.2rem;
          border-radius: 4px;
          color: #fff;
        }

        .name {
          font-size: 0.28rem;
        }
      }

      .tel {
        font-size: 0.3rem;
        color: #333;
      }
    }

    .contact_rt {
      .icon-wx {
        font-size: 0.7rem;
        color: #409eff;
      }

      .icon-tel {
        font-size: 0.64rem;
        color: #35bc04;
        margin-right: 0.1rem;
        // font-size: 0.36rem;
        // background: #35bc04;
        // color: #fff;
        // text-align: center;
        // padding: 0.1rem;
        // border-radius: 50%;
        // position: relative;
        // top: -6px;
        // margin-right: 0.1rem;
      }
    }
  }
}

.addBtn {
  width: 100%;
  background: #fff;
  padding-bottom: 10px;

  .orderItem_filebox {
    background: linear-gradient(316deg, #3975c6 0%, #71a4ea 100%);
    cursor: pointer;

    width: 120px;
    margin: auto;
    text-align: center;
    font-size: 0.28rem;
    color: #fff;
    padding: 0.25rem 0rem;
    border-radius: 50px;
    margin-top: 20px;
  }
}

.relationTitle {
  padding-left: 0.2rem;
  border-left: 4px solid #409eff;
  margin-left: 0.3rem;
  margin-top: 0.3rem;
  font-size: 0.26rem;
}

.orderList {
  margin: 0.2rem;
  overflow: hidden;
  padding-bottom: 1.5rem;
  height: 3rem;
  overflow: auto;

  .orderItem {
    padding: 0.3rem;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 0.3rem;

    .orderItem_header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.3rem;
      padding-bottom: 0.2rem;
      border-bottom: 1px solid #f6f6f6;
      position: relative;

      .orderItem_lt {
        .carNo {
          font-size: 0.3rem;
          color: #333;
          margin-right: 0.2rem;
          font-weight: bold;
        }

        .txt {
          font-size: 0.26rem;
          color: #999;
          margin-top: 0.1rem;
        }

        .carStatus {
          background: #35bc04;
          color: #fff;
          border-radius: 4px;
          padding: 0.1rem 0.2rem;
          font-size: 0.24rem;
          text-align: center;
          width: 1rem;
          margin-top: 0.1rem;
        }
      }

      .orderItem_rt {
        display: flex;
        align-items: center;
        align-self: center;
        justify-content: flex-start;
        color: #666;
        font-size: 0.28rem;

        .txt {
          font-size: 0.28rem;
          color: #161616;
        }

        .icon-tel {
          font-size: 0.64rem;
          color: #35bc04;
          margin-right: 0.1rem;
          // color: #fff;
          // background: #35bc04;
          // font-size: 0.32rem;
          // padding: 0.1rem;
          // border-radius: 50%;
          // margin-right: 0.2rem;
        }

        .icon-wx {
          color: #409eff;
          font-size: 0.65rem;
        }
      }
    }

    .orderItem_content {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      align-items: center;

      .orderItem_data {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 50%;
        margin-bottom: 0.2rem;
        font-size: 0.28rem;
        box-sizing: content-box;
        color: #333;

        .order_label {
          font-size: 0.28rem;
          color: #333;
          width: 1.8rem;
        }

        .txt {
          font-size: 0.28rem;
          color: #666;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        &.time {
          width: 100%;
        }
      }
    }

    .orderItem_file {
      background: #ebebeb;
      color: #333;
      border-radius: 5px;
      padding: 0.2rem 0;
      text-align: center;
      width: 100%;
      font-size: 0.28rem;
      display: flex;
      align-items: center;
      justify-content: center;

      .file_item {
        width: 33.33%;
        border-right: 1px solid #ccc;

        .icon-tel {
          font-size: 0.34rem;
          color: #35bc04;
          margin-right: 0.1rem;
        }

        .icon-mileage {
          font-size: 0.4rem;
          color: #409eff;
          margin-right: 0.1rem;
          position: relative;
          top: 0.04rem;
        }

        .icon-gw {
          font-size: 0.4rem;
          color: #409eff;
          margin-right: 0.1rem;
          position: relative;
          top: 0.04rem;
        }

        &:last-child {
          border: none;
        }
      }
    }
  }
}

// 跟进信息
.followInfo {
  padding: 0.2rem;
  background: #fff;
  height: 7rem;
  overflow: auto;

  .followInfo_item {
    margin-bottom: 0.2rem;
    position: relative;

    .followInfo_lt {
      width: 20%;

      .followInfo_time {
        font-size: 0.26rem;
        color: #999;
        position: absolute;
        top: 3px;
        left: -21px;
        width: 100px;
        text-align: center;
      }

      &::before {
        content: '';
        height: 130px;
        width: 1px;
        background: #ccc;
        position: absolute;
        top: 30px;
        left: 0.6rem;
      }

      .icon-circle {
        color: #ccc;
        z-index: 2;
        position: absolute;
        top: 40px;
        left: 0.42rem;
        background: #fff;
      }
    }

    .followInfo_rt {
      background: #f1f1f1;
      width: 80%;
      padding: 0.3rem 0 0.3rem 0.3rem;
      border-radius: 4px;

      .followInfo_num {
        font-size: 0.28rem;
        color: #333;
        margin-bottom: 0.1rem;
        margin-bottom: 0.2rem;
        font-weight: bold;
      }

      .followInfo_data {
        font-size: 0.26rem;
        color: #666;
        margin-bottom: 0.1rem;

        .followInfo_img {
          width: 0.8rem;
          height: 0.8rem;
          margin-right: 0.1rem;
        }
      }
    }
  }
}

.noContent {
  margin-top: 2rem;
}

.martop {
  margin-top: 0rem !important;
}

.pcCarInfo {
  font-size: 0.28rem;
  padding: 0.2rem;

  .carInfobox {
    .carInfobox_con {
      display: flex;
      flex-wrap: wrap;

      .carInfobox_data {
        margin-bottom: 0.25rem;
        width: 33%;

        .carInfobox_data_label {
          color: #999;
          margin-bottom: 0.1rem;
        }

        .txt {
          color: #666;
        }
      }
    }
  }
}

.pc_contact {
  padding: 0.2rem;

  .contactItem {
    justify-content: space-between;
    background: #fff;
    padding: 0.2rem;
    margin-bottom: 0.1rem;
    border-radius: 4px;
    border: 1px dashed #409eff;

    .contact_lt {
      .header {
        margin-bottom: 0.2rem;
        color: #333;

        .txt {
          font-size: 0.2rem;
          margin-right: 0.2rem;
          background: #409eff;
          padding: 0.1rem 0.2rem;
          border-radius: 4px;
          color: #fff;
        }

        .name {
          font-size: 0.28rem;
        }
      }

      .tel {
        font-size: 0.3rem;
        color: #333;
      }
    }

    .contact_rt {
      .icon-wx {
        font-size: 0.7rem;
        color: #409eff;
      }

      .icon-tel {
        font-size: 0.64rem;
        color: #35bc04;
        margin-right: 0.1rem;
        // font-size: 0.36rem;
        // background: #35bc04;
        // color: #fff;
        // text-align: center;
        // padding: 0.1rem;
        // border-radius: 50%;
        // position: relative;
        // top: -6px;
        // margin-right: 0.1rem;
      }
    }
  }
}

.pc_taskDetail {
  font-size: 0.28rem;
  padding: 0.2rem;

  .carInfobox {
    .carInfobox_con {
      display: flex;
      flex-wrap: wrap;

      .carInfobox_data {
        margin-bottom: 0.25rem;
        width: 20%;

        .carInfobox_data_label {
          color: #999;
          margin-bottom: 0.1rem;
        }

        .txt {
          color: #333;
        }
      }
    }
  }
}

.taskDetail_box {
  width: 100%;
  min-height: 350px;
  background: #fff;
  // overflow: hidden;
  margin-right: 0.2rem;
  box-sizing: content-box;

  .com_title {
    position: relative;
    background: #dcdcdc;
    font-size: 0.32rem;
    padding: 0.2rem;

    &::before {
      content: '';
      background: #409eff;
      width: 4px;
      position: absolute;
      height: 20px;
      top: 7px;
      left: 0;
    }
  }
}

.long_txt {
  display: -webkit-box;
  /* 将容器以弹性盒子形式布局 */
  -webkit-line-clamp: 2;
  /* 限制文本显示为两行 */
  -webkit-box-orient: vertical;
  /* 将弹性盒子的主轴方向设置为垂直方向 */
  overflow: hidden;
  /* 隐藏容器中超出部分的内容 */
  text-overflow: ellipsis;
  /* 超出容器范围的文本显示省略号 */
}

.detailbox_item {
  margin-top: 10px;
  background: #fff;
  padding: 10px;

  // position: relative;
  .detailbox_item_title {
    font-size: 16px;
    font-weight: 700;
    color: #1d2129;
    margin-bottom: 14px;
    background: url('~@/assets/images/ttbg.png') no-repeat left bottom #fff;
    background-size: 32px 6px;
    // position: absolute;
    // top: 0;
    // left: 0;
    // width: 100%;
  }

  .detail_content {
    background: #f9fafc;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #fbfcfe;
    padding: 17px 16px;

    .task_item_type {
      margin-bottom: 20px;

      .task_item_tt {
        font-weight: 800;
        font-size: 12px;
        color: #86909c;
        margin-bottom: 10px;
      }

      .task_item_val {
        font-weight: 700;
        font-size: 16px;
        color: #333333;
      }

      .task_item_desc {
        font-weight: 300;
        font-size: 14px;
        color: #000000;
        background: #f2f3f5;
        padding: 5px 6px;
      }
    }

    .task_itembox {
      overflow: hidden;

      .task_itembox_con {
        width: 50%;
        margin-bottom: 15px;
        float: left;

        .task_label {
          font-weight: 400;
          font-size: 12px;
          color: #86909c;
          margin-bottom: 5px;
        }

        .task_value {
          font-weight: 700;
          font-size: 16px;
          color: #2f2f2f;
        }
      }
    }
  }

  .relat_tab {
    display: flex;
    margin-bottom: 10px;

    .relat_tab_item {
      font-weight: 500;
      font-size: 12px;
      color: #333333;
      border-radius: 4px;
      padding: 5px 8px;
      background: #f7f7f7;
      margin-right: 5px;

      &.active {
        color: #165dff;
        background: #d8e3ff;
      }
    }
  }

  .relat_content {
    .relat_item {
      background: #ffffff;
      box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.09);
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #fbfcfe;
      margin-bottom: 20px;
      padding: 10px 9px 12px;
      cursor: pointer;

      .relat_content_header {
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;

        .name {
          font-weight: bold;
          font-size: 14px;
          color: #333333;
        }

        .status {
          font-weight: 700;
          font-size: 12px;
          color: #00b42a;
          background: #e8ffea;
          border-radius: 2px 2px 2px 2px;
          padding: 5px 8px;

          &.status2 {
            background: rgba(255, 48, 33, 0.2);
            color: #ff1100;
          }
        }
      }

      .relat_carInfo {
        font-weight: 300;
        font-size: 14px;
        color: #000000;
        background: #f2f3f5;
        padding: 5px 6px;
        margin-bottom: 12px;
      }

      .relat_user {
        display: flex;
        justify-content: space-between;
        font-weight: bold;
        font-size: 12px;
        color: #165dff;
        background: #e8f5ff;
        border-radius: 2px 2px 2px 2px;
        padding: 5px 6px;
      }
    }
  }

  .followInfo_content {
    .followInfo_item {
      padding: 10px 0px 10px 20px;

      .followInfo_top {
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        .followInfo_circle {
          background: #f2f2f2;
          border-radius: 50%;
          width: 9px;
          height: 9px;
          margin-right: 10px;
        }

        .followInfo_name {
          font-weight: 700;
          font-size: 14px;
          color: #86909c;
        }
      }

      .followInfo_box {
        display: flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;

        .followInfo_linebox {
          width: 1px;
          position: relative;
          -ms-flex-item-align: stretch;
          align-self: stretch;
          background: #f2f2f2;
          margin: 0 10px 0 4px;
        }

        .followInfo_val {
          width: 100%;
          padding: 12px 16px;
          background: #f9fafc;
          border-radius: 4px 4px 4px 4px;
          border: 1px solid #fbfcfe;
          flex: 1;

          .followInfo_val_item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;

            .item_label {
              font-weight: 400;
              font-size: 14px;
              color: #86909c;
            }

            .item_val {
              font-weight: 700;
              font-size: 14px;
              color: #2f2f2f;
            }
          }

          .followInfo_val_item2 {
            .item_label {
              font-weight: 400;
              font-size: 14px;
              color: #86909c;
              margin-bottom: 10px;
            }

            .item_val {
              font-weight: 300;
              font-size: 14px;
              color: #86909c;
              background: #f2f3f5;
              padding: 5px 6px;
            }
          }
        }
      }

      &.active {
        .followInfo_top {
          .followInfo_circle {
            background: #165dff;
          }

          .followInfo_name {
            color: #165dff;
          }
        }

        .followInfo_box {
          .followInfo_linebox {
            background: #165dff;
          }
        }
      }
    }
  }

  .carInfo_content {
    background: #f9fafc;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #fbfcfe;
    padding: 7px 16px;

    .carInfo_item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;

      .item_label {
        font-weight: 400;
        font-size: 12px;
        color: #86909c;
      }

      .item_val {
        font-weight: 700;
        font-size: 12px;
        color: #333333;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .contact_content {
    .contact_item {
      box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.02);
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #f4f4f6;
      margin-bottom: 3px;
      padding: 12px 10px 12px 10px;

      .contact_top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin-bottom: 14px;

        .item_label {
          font-weight: 700;
          font-size: 12px;
          color: #165dff;
          background: #e8f5ff;
          border-radius: 2px 2px 2px 2px;
          padding: 4px 5px;
        }

        .item_icon {
          display: flex;

          .item_img {
            width: 29px;
            height: 29px;
            margin-right: 17px;

            &:last-child {
              margin-right: 0;
            }
          }
        }
      }

      .contact_bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 4px;

        .item_name {
          display: flex;

          .txt1 {
            font-weight: 400;
            font-size: 12px;
            color: #86909c;
          }

          .txt2 {
            font-weight: 700;
            font-size: 12px;
            color: #2f2f2f;
          }
        }
      }
    }
  }

  .repair_content {
    .repair_list {
      .repair_item {
        box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.05);
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #f4f4f6;
        padding: 10px;
        margin-bottom: 10px;

        .item_top {
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #f7f5f5;
          padding-bottom: 10px;

          .item_num {
            display: flex;
            align-items: center;

            .item_icon {
              width: 11px;
              display: block;
              height: 11px;
              margin-right: 5px;
            }

            .item_name {
              font-weight: 800;
              font-size: 14px;
              color: #333333;
            }
          }

          .item_btn {
            font-weight: 400;
            font-size: 12px;
            color: #165dff;
          }
        }

        .item_bottom {
          padding-top: 8px;

          .item_box {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            align-items: center;
            width: 100%;

            .item_lt {
              display: flex;

              .item_lable {
                font-weight: 400;
                font-size: 12px;
                color: #86909c;
              }

              .item_val {
                font-weight: 400;
                font-size: 12px;
                color: #2f2f2f;
              }
            }

            .item_rt {
              background: #e8f5ff;
              border-radius: 2px 2px 2px 2px;
              font-weight: 700;
              font-size: 10px;
              color: #165dff;
              padding: 3px 5px;
              display: flex;

              .item_lable {
              }

              .item_val {
              }
            }

            .item_rt2 {
              display: flex;

              .item_lable {
                font-weight: 400;
                font-size: 12px;
                color: #86909c;
              }

              .item_val {
                font-weight: 400;
                font-size: 12px;
                color: #2f2f2f;
              }
            }
          }

          .item_box2 {
            .item_lt {
              display: flex;

              /* 使用弹性盒模型 */
              .item_lable {
                font-weight: 400;
                font-size: 12px;
                color: #86909c;
                width: 60px;
              }

              .item_val {
                font-weight: 400;
                font-size: 12px;
                color: #2f2f2f;
                width: calc(100% - 60px);
              }
            }
          }
        }
      }
    }
  }

  .repair_height {
    height: 455px;
    overflow: auto;
  }

  .card_content {
    // min-height: calc(100vh - 150px);

    .card_item {
      border-radius: 4px;
      position: relative;
      height: 86px;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      background: #fff;

      .item_lt {
        width: 134px;
        height: 86px;
        font-weight: 700;
        font-size: 36px;
        line-height: 86px;
        color: #ffffff;
        background: url('~@/assets/images/card_bg.png') no-repeat center;
        background-size: 134px 86px;
        text-align: center;
        margin-right: 10px;
        border-radius: 0px 12px 12px 0px;
      }

      .item_rt {
        padding-top: 10px;

        .item_name {
          margin-bottom: 8px;
          font-weight: 700;
          font-size: 14px;
          color: #2f2f2f;
        }

        .item_number {
          font-weight: 700;
          font-size: 12px;
          color: #2f2f2f;
          margin-bottom: 8px;
        }

        .item_time {
          font-weight: 400;
          font-size: 12px;
          color: #86909c;
          display: flex;

          .txt1 {
            margin-right: 10px;
          }
        }
      }

      .item_type {
        font-weight: 700;
        font-size: 12px;
        color: #ffffff;
        text-align: center;
        padding: 5px 10px;
        border-radius: 0px 4px 0px 4px;
        background: #ff2b2b;
        position: absolute;
        top: 0px;
        right: 0;
      }
    }
  }
}

.no_icon {
  padding: 25px;

  .no_icon_img {
    width: 70px;
    display: block;
    margin: auto;
  }

  .no_icon_txt {
    font-weight: 400;
    font-size: 14px;
    color: #86909c;
    text-align: center;
    margin-top: 10px;
  }
}

.mb80 {
  margin-bottom: 80px;
}

.mt0 {
  margin-top: 0px;
}

.mt175 {
  margin-top: 175px;
}

.h250 {
  height: 250px;
  overflow: auto;
}

.h500 {
  height: 502px;
  overflow: auto;
}

.h170 {
  height: 170px;
  overflow: auto;
}

.h100 {
  height: 100px;
  overflow: auto;
}

.mt100 {
  margin-top: 100px;
}

.h600 {
  height: 600px;
  overflow: auto;
}

.rowbox {
  display: flex;
  justify-content: space-around;
}

.h395 {
  max-height: 395px;
  overflow: auto;
}

.groupInfo {
  .groupInfo_item {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 20px;

    .groupInfo_icon {
      height: 50px;
      width: 50px;
      background: rgba(255, 48, 33, 0.6);
      border-radius: 4px;
      text-align: center;
      line-height: 50px;
      font-size: 24px;
      color: #fff;
      margin-right: 10px;
    }

    .groupInfo_detail {
      font-size: 12px;
      color: #999;

      .groupInfo_name {
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 2px;
        margin-bottom: 6px;
        color: #333;
        width: 240px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .groupInfo_txt {
        margin-bottom: 6px;

        .groupInfo_span {
          margin-right: 5px;
        }

        .groupInfo_span1 {
          margin-left: 5px;
        }
      }

      .groupInfo_txt1 {
      }
    }

    .groupInfo_btn {
      position: absolute;
      top: 0;
      right: 0;
      font-size: 14px;
      color: #165dff;
      cursor: pointer;

      .to_chat {
        text-align: center;
        margin-top: 9px;
      }
    }
  }
}

.contact_list {
  padding: 0.5rem 0.2rem 0 0.2rem;

  .contact_item {
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .contact_lt {
    font-size: 0.28rem;
    color: #23ec1c;

    .contact_header {
      width: 30px;
      height: 30px;
      display: block;
      border-radius: 5px;
      margin-right: 5px;
    }

    .contact_name {
      font-size: 0.28rem;
      color: #333;
      margin-left: 5px;
      flex: 1;
    }

    .contact_com {
      color: #f65e07;
      font-size: 0.28rem;
    }

    .contact_com_wx {
      color: #23ec1c;
      font-size: 0.28rem;
      width: 50px;
      text-align: center;
    }
  }

  .contact_btn {
    background: #409eff;
    color: #fff;
    padding: 5px 0;
    text-align: center;
    border-radius: 3px;
    font-size: 0.28rem;
    width: 60px;
  }
}

.h600 {
  max-height: 300px;
  overflow: auto;
}

.groupInfo_content {
  padding-bottom: 20px;
  margin-bottom: 30px;
  overflow: auto;
}

.userList_content {
  overflow: auto;

  .userList_item:last-child {
    margin-bottom: 0;
  }
}

.pt80 {
  padding-top: 80px;
}

.membot {
  border-bottom: 1px solid #f1f1f1;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.contact_type {
  font-size: 14px;
  color: #999;
  margin-left: 5px;
}

.h150 {
  height: 150px;
}

.detailbox_item_search {
  font-size: 14px;

  .followParams {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .followParams_item {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .followParams_label {
      }

      .followParams_select {
        border: 1px solid #165dff;
        border-radius: 3px;
        padding: 5px 10px 5px 5px;
        margin-left: 10px;
        font-size: 12px;
        display: flex;
        align-items: center;

        .followParams_select_txt {
          max-width: 130px;
          flex-shrink: 0;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }

        .icon-more {
          font-size: 14px;
          margin-left: 10px;
        }
      }

      .followParams_icon {
        color: #165dff;

        .iconfont {
          font-size: 20px;
        }
      }
    }
  }
}
.videoClass {
  height: 100%;
  display: flex;
  align-items: center;
  margin-left: 10px;
  font-size: 12px;
  color: #999999;
}
.borderClass {
  border: 1px solid #c3c3c3;
  padding: 10px;
  margin-top: 5px;
}

.phoneNumberIcon {
  position: fixed;
  right: 30px;
  bottom: 70px;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.09);
  display: flex;
  align-items: center;
  justify-content: center;
}

.calldialogClass {
    width: 100%;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    line-height: 50px;
  }

  .callButtonClass {
    width: 70px;
    height: 30px;
    border-radius: 5px;
    line-height: 30px;
    text-align: center;
    background-color: #1684fc;
    color: #fff;
    margin-left: 10px;
  }
  .input-placeholder{
    // font-size: 30px;
  }
  /deep/ .van-button__text{
    font-size: 20px !important;
  }
</style>
